StreamGraph: Formatting
The StreamGraph component allows custom formatting of keys and values through `keyFormatFn` and `valueFormatFn` props.
These functions provide flexibility in how the data labels and values are displayed, enhancing readability and context.
Usage
<StreamGraph
{groupToColorFn}
geometry={{
...geometry,
safetyLeft: 80,
safetyRight: 80,
}}
groups={streamGraphGroups}
keyFormatFn={key => key.splice(-5)}
points={streamGraphPoints}
valueFormatFn={value => `${Math.round(value)} units`}
/>Props
geometry
- { safetyBottom: 50 ,safetyLeft: 80 ,safetyRight: 80 ,safetyTop: 50 }
- safetyBottom: 50
- safetyLeft: 80
- safetyRight: 80
- 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]]: ƒ ()
keyFormatFn
- ƒ key => key.slice(-5)
- length: 1
- name: "keyFormatFn"
- [[Function]]: key => key.slice(-5)
- [[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)} units`
- [[Prototype]]: ƒ ()