From 6072a33a1a7e3d694bc226e811e251a06c2eeb29 Mon Sep 17 00:00:00 2001
From: "guilhem.carron" <gcarron@grandlyon.com>
Date: Thu, 29 Apr 2021 16:19:24 +0200
Subject: [PATCH] Add consumption events
---
src/components/Charts/Bar.tsx | 11 ++++++++++-
src/components/Charts/BarChart.tsx | 3 +++
src/components/FluidChart/FluidChart.tsx | 9 ++++++++-
.../TimeStepSelector/TimeStepSelector.tsx | 19 ++++++++++++++++---
4 files changed, 37 insertions(+), 5 deletions(-)
diff --git a/src/components/Charts/Bar.tsx b/src/components/Charts/Bar.tsx
index a8d1cdd9c..828ac75aa 100644
--- a/src/components/Charts/Bar.tsx
+++ b/src/components/Charts/Bar.tsx
@@ -13,6 +13,9 @@ import {
setCurrentDatachartIndex,
setSelectedDate,
} from 'store/chart/chart.actions'
+import { Client } from 'cozy-client'
+import { UsageEventType } from 'enum/usageEvent.enum'
+import UsageEventService from 'services/usageEvent.service'
interface BarProps {
index: number
@@ -26,6 +29,7 @@ interface BarProps {
height: number
isSwitching: boolean
isDuel?: boolean
+ client: Client
}
const Bar = ({
@@ -40,6 +44,7 @@ const Bar = ({
height,
isSwitching,
isDuel,
+ client,
}: BarProps) => {
const dispatch = useDispatch()
const { selectedDate } = useSelector((state: AppStore) => state.ecolyo.chart)
@@ -51,7 +56,11 @@ const Bar = ({
const fluidStyle =
fluidType === FluidType.MULTIFLUID ? 'MULTIFLUID' : FluidType[fluidType]
- const handleClick = () => {
+ const handleClick = async () => {
+ await UsageEventService.addEvent(client, {
+ type: UsageEventType.CONSUMPTION_INTERACT_EVENT,
+ context: FluidType[fluidType] + ' / ' + TimeStep[timeStep],
+ })
if (!isSwitching && !isDuel) {
setClicked(true)
dispatch(setSelectedDate(dataload.date))
diff --git a/src/components/Charts/BarChart.tsx b/src/components/Charts/BarChart.tsx
index fd6655be9..c66c9b4c0 100644
--- a/src/components/Charts/BarChart.tsx
+++ b/src/components/Charts/BarChart.tsx
@@ -9,6 +9,7 @@ import { Datachart } from 'models'
import Bar from 'components/Charts/Bar'
import AxisBottom from 'components/Charts/AxisBottom'
import AxisRight from 'components/Charts/AxisRight'
+import { useClient } from 'cozy-client'
export interface BarChartProps {
chartData: Datachart
@@ -37,6 +38,7 @@ const BarChart: React.FC<BarChartProps> = ({
marginBottom = 50,
isSwitching,
}: BarChartProps) => {
+ const client = useClient()
const getContentWidth = () => {
return width - marginLeft - marginRight
}
@@ -97,6 +99,7 @@ const BarChart: React.FC<BarChartProps> = ({
yScale={yScale}
height={getContentHeight()}
isSwitching={isSwitching}
+ client={client}
/>
))}
</g>
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index 029307334..d5413c8fc 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -21,6 +21,8 @@ import { DateTime } from 'luxon'
import { updateProfile } from 'store/profile/profile.actions'
import OldFluidDataModal from 'components/Home/OldFluidDataModal'
import FluidService from 'services/fluid.service'
+import { UsageEventType } from 'enum/usageEvent.enum'
+import UsageEventService from 'services/usageEvent.service'
interface FluidChartProps {
fluidType: FluidType
@@ -57,7 +59,12 @@ const FluidChart: React.FC<FluidChartProps> = ({
setopenOldFluidDataModal(false)
}, [dispatch])
- const handleChangeSwitch = () => {
+ const handleChangeSwitch = async () => {
+ await UsageEventService.addEvent(client, {
+ type: UsageEventType.CONSUMPTION_COMPARE_EVENT,
+ target: TimeStep[currentTimeStep],
+ context: FluidType[fluidType],
+ })
setShowCompare(!showCompare)
}
diff --git a/src/components/TimeStepSelector/TimeStepSelector.tsx b/src/components/TimeStepSelector/TimeStepSelector.tsx
index 750b80889..6576cec1d 100644
--- a/src/components/TimeStepSelector/TimeStepSelector.tsx
+++ b/src/components/TimeStepSelector/TimeStepSelector.tsx
@@ -14,6 +14,9 @@ import Button from '@material-ui/core/Button'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import ZoomInIcon from 'assets/icons/ico/zoom-in.svg'
import ZoomOutIcon from 'assets/icons/ico/zoom-out.svg'
+import { useClient } from 'cozy-client'
+import { UsageEventType } from 'enum/usageEvent.enum'
+import UsageEventService from 'services/usageEvent.service'
interface TimeStepSelectorProps {
fluidType: FluidType
@@ -28,7 +31,7 @@ const TimeStepSelector: React.FC<TimeStepSelectorProps> = ({
const { t } = useI18n()
const dispatch = useDispatch()
const dateChartService = new DateChartService()
-
+ const client = useClient()
const timeStepElecArray: TimeStep[] = [
TimeStep.HALF_AN_HOUR,
TimeStep.WEEK,
@@ -47,7 +50,7 @@ const TimeStepSelector: React.FC<TimeStepSelectorProps> = ({
? [...timeStepElecArray]
: [...timeStepMultiArray]
- const handleZoomInClick = () => {
+ const handleZoomInClick = async () => {
const previousTimeStep: TimeStep = dateChartService.definePreviousTimeStep(
currentTimeStep
)
@@ -55,10 +58,15 @@ const TimeStepSelector: React.FC<TimeStepSelectorProps> = ({
previousTimeStep,
selectedDate
)
+ await UsageEventService.addEvent(client, {
+ type: UsageEventType.CONSUMPTION_CHANGE_TIMESTEP_EVENT,
+ target: TimeStep[previousTimeStep],
+ context: FluidType[fluidType],
+ })
dispatch(setCurrentTimeStep(previousTimeStep))
dispatch(setCurrentIndex(index))
}
- const handleZoomOutClick = () => {
+ const handleZoomOutClick = async () => {
const nextTimeStep: TimeStep = dateChartService.defineNextTimeStep(
currentTimeStep
)
@@ -66,6 +74,11 @@ const TimeStepSelector: React.FC<TimeStepSelectorProps> = ({
nextTimeStep,
selectedDate
)
+ await UsageEventService.addEvent(client, {
+ type: UsageEventType.CONSUMPTION_CHANGE_TIMESTEP_EVENT,
+ target: TimeStep[nextTimeStep],
+ context: FluidType[fluidType],
+ })
dispatch(setCurrentTimeStep(nextTimeStep))
dispatch(setCurrentIndex(index))
}
--
GitLab