StreamGraph: Basic Usage

StreamGraph displays data as flowing, organic shapes, representing the changes in data over time.

The component requires `points` (an array of data points), `groups` (categories in the data), and a `groupToColorFn` to assign colors to each group.

Custom themes can be applied by providing a `theme` object, allowing you to control the aesthetics of the grid, frame, and text.

Usage

<StreamGraph
  {groupToColorFn}
  {valueFormatFn}
  geometry
  groups={streamGraphGroups}
  points={streamGraphPoints}
/>

Props

geometry

    ▶ { safetyBottom: 50 ,safetyLeft: 50 ,safetyRight: 50 ,safetyTop: 50 }
    • safetyBottom: 50
    • safetyLeft: 50
    • safetyRight: 50
    • safetyTop: 50

groups

    ▶ (5) [ "AE160JXYDEH/EU" ,"Daikin Altherma" ,"Ecodan" ,"NIBE" ,"aroTHERM" ]
    • 0: "AE160JXYDEH/EU"
    • 1: "Daikin Altherma"
    • 2: "Ecodan"
    • 3: "NIBE"
    • 4: "aroTHERM"
    • length: 5

groupToColorFn

    ▶ ƒ undefined
    • length: 1
    • [[Function]]: key => keyToColorMap[key]
    • [[Prototype]]: ƒ ()

points

    ▶ (55) [ {…} ,{…} ,{…} ,{…} ,{…} , … ]
    • 0: { group: "Ecodan" ,key: "2016-08" ,value: 139 }
    • 1: { group: "Daikin Altherma" ,key: "2016-08" ,value: 33 }
    • 2: { group: "aroTHERM" ,key: "2016-08" ,value: 27 }
    • 3: { group: "NIBE" ,key: "2016-08" ,value: 13 }
    • 4: { group: "AE160JXYDEH/EU" ,key: "2016-08" ,value: 16 }
    • 5: { group: "Ecodan" ,key: "2016-09" ,value: 164 }
    • 6: { group: "Daikin Altherma" ,key: "2016-09" ,value: 51 }
    • 7: { group: "aroTHERM" ,key: "2016-09" ,value: 19 }
    • 8: { group: "NIBE" ,key: "2016-09" ,value: 21 }
    • 9: { group: "AE160JXYDEH/EU" ,key: "2016-09" ,value: 11 }
    • 10: { group: "Ecodan" ,key: "2016-10" ,value: 144 }
    • 11: { group: "Daikin Altherma" ,key: "2016-10" ,value: 47 }
    • 12: { group: "aroTHERM" ,key: "2016-10" ,value: 12 }
    • 13: { group: "NIBE" ,key: "2016-10" ,value: 21 }
    • 14: { group: "AE160JXYDEH/EU" ,key: "2016-10" ,value: 16 }
    • 15: { group: "Ecodan" ,key: "2016-11" ,value: 189 }
    • 16: { group: "Daikin Altherma" ,key: "2016-11" ,value: 74 }
    • 17: { group: "aroTHERM" ,key: "2016-11" ,value: 29 }
    • 18: { group: "NIBE" ,key: "2016-11" ,value: 17 }
    • 19: { group: "AE160JXYDEH/EU" ,key: "2016-11" ,value: 16 }
    • 20: { group: "Ecodan" ,key: "2016-12" ,value: 187 }
    • 21: { group: "Daikin Altherma" ,key: "2016-12" ,value: 71 }
    • 22: { group: "aroTHERM" ,key: "2016-12" ,value: 15 }
    • 23: { group: "NIBE" ,key: "2016-12" ,value: 21 }
    • 24: { group: "AE160JXYDEH/EU" ,key: "2016-12" ,value: 23 }
    • 25: { group: "Ecodan" ,key: "2017-01" ,value: 136 }
    • 26: { group: "Daikin Altherma" ,key: "2017-01" ,value: 50 }
    • 27: { group: "aroTHERM" ,key: "2017-01" ,value: 35 }
    • 28: { group: "NIBE" ,key: "2017-01" ,value: 17 }
    • 29: { group: "AE160JXYDEH/EU" ,key: "2017-01" ,value: 14 }
    • 30: { group: "Ecodan" ,key: "2017-02" ,value: 224 }
    • 31: { group: "Daikin Altherma" ,key: "2017-02" ,value: 65 }
    • 32: { group: "aroTHERM" ,key: "2017-02" ,value: 23 }
    • 33: { group: "NIBE" ,key: "2017-02" ,value: 20 }
    • 34: { group: "AE160JXYDEH/EU" ,key: "2017-02" ,value: 14 }
    • 35: { group: "Ecodan" ,key: "2017-03" ,value: 255 }
    • 36: { group: "Daikin Altherma" ,key: "2017-03" ,value: 78 }
    • 37: { group: "aroTHERM" ,key: "2017-03" ,value: 25 }
    • 38: { group: "NIBE" ,key: "2017-03" ,value: 40 }
    • 39: { group: "AE160JXYDEH/EU" ,key: "2017-03" ,value: 21 }
    • 40: { group: "Ecodan" ,key: "2017-04" ,value: 190 }
    • 41: { group: "Daikin Altherma" ,key: "2017-04" ,value: 74 }
    • 42: { group: "aroTHERM" ,key: "2017-04" ,value: 11 }
    • 43: { group: "NIBE" ,key: "2017-04" ,value: 11 }
    • 44: { group: "AE160JXYDEH/EU" ,key: "2017-04" ,value: 16 }
    • 45: { group: "Ecodan" ,key: "2017-05" ,value: 254 }
    • 46: { group: "Daikin Altherma" ,key: "2017-05" ,value: 47 }
    • 47: { group: "aroTHERM" ,key: "2017-05" ,value: 13 }
    • 48: { group: "NIBE" ,key: "2017-05" ,value: 21 }
    • 49: { group: "AE160JXYDEH/EU" ,key: "2017-05" ,value: 17 }
    • 50: { group: "Ecodan" ,key: "2017-06" ,value: 169 }
    • 51: { group: "Daikin Altherma" ,key: "2017-06" ,value: 39 }
    • 52: { group: "aroTHERM" ,key: "2017-06" ,value: 15 }
    • 53: { group: "NIBE" ,key: "2017-06" ,value: 18 }
    • 54: { group: "AE160JXYDEH/EU" ,key: "2017-06" ,value: 22 }
    • length: 55

valueFormatFn

    ▶ ƒ value => Math.round(value)
    • length: 1
    • name: "valueFormatFn"
    • [[Function]]: value => Math.round(value)
    • [[Prototype]]: ƒ ()