Add consumption events

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))

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>

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)
   }
 

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))
   }