-
- {enableChip &&
}
- {value !== undefined ? (
-
- {id}: {value}
-
- ) : (
- id
- )}
+const BasicTooltip = props => {
+ const { id, value: _value, format, enableChip, color, theme } = props
+
+ let value = _value
+ if (format !== undefined && value !== undefined) {
+ value = format(value)
+ }
+
+ return (
+
+
+ {enableChip && }
+ {value !== undefined ? (
+
+ {id}: {value}
+
+ ) : (
+ id
+ )}
+
-
-)
+ )
+}
BasicTooltip.propTypes = {
id: PropTypes.node.isRequired,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
enableChip: PropTypes.bool.isRequired,
color: PropTypes.string,
+ format: PropTypes.func,
theme: PropTypes.shape({
tooltip: PropTypes.shape({
@@ -46,4 +60,12 @@ BasicTooltip.defaultProps = {
enableChip: false,
}
-export default pure(BasicTooltip)
+const enhance = compose(
+ withPropsOnChange(['format'], ({ format }) => {
+ if (!format || isFunction(format)) return { format }
+ return { format: d3Format(format) }
+ }),
+ pure
+)
+
+export default enhance(BasicTooltip)
diff --git a/stories/charts/bar.stories.js b/stories/charts/bar.stories.js
index 07b8ae060..dd2b5a3d1 100644
--- a/stories/charts/bar.stories.js
+++ b/stories/charts/bar.stories.js
@@ -162,3 +162,19 @@ stories.add('custom bar item', () => (
labelTextColor="inherit:darker(1)"
/>
))
+
+stories.add('with formatted values', () => (
+
+ Number(value).toLocaleString('ru-RU', {
+ minimumFractionDigits: 2,
+ }),
+ }}
+ tooltipFormat={value =>
+ `${Number(value).toLocaleString('ru-RU', {
+ minimumFractionDigits: 2,
+ })} ₽`}
+ />
+))
diff --git a/stories/charts/bubble.stories.js b/stories/charts/bubble.stories.js
index 4807bfbb0..6d886506f 100644
--- a/stories/charts/bubble.stories.js
+++ b/stories/charts/bubble.stories.js
@@ -19,3 +19,12 @@ storiesOf('Bubble', module)
.addDecorator(story => {story()}
)
.add('default', () => )
.add('rendering leaves only', () => )
+ .add('with formatted values', () => (
+
+ `${Number(value).toLocaleString('ru-RU', {
+ minimumFractionDigits: 2,
+ })} ₽`}
+ />
+ ))
diff --git a/stories/charts/chord.stories.js b/stories/charts/chord.stories.js
index cd18753a1..7a7bb9351 100644
--- a/stories/charts/chord.stories.js
+++ b/stories/charts/chord.stories.js
@@ -55,3 +55,14 @@ stories.add('putting labels inside arcs', () => (
labelTextColor="inherit:darker(1.2)"
/>
))
+
+stories.add('with formatted values', () => (
+
+ `${Number(value).toLocaleString('ru-RU', {
+ minimumFractionDigits: 2,
+ })} ₽`}
+ />
+))
diff --git a/stories/charts/heatmap.stories.js b/stories/charts/heatmap.stories.js
index 69e2270a2..8906644e5 100644
--- a/stories/charts/heatmap.stories.js
+++ b/stories/charts/heatmap.stories.js
@@ -113,3 +113,13 @@ stories.add('Custom cell component', () => (
labelTextColor="inherit:darker(1.6)"
/>
))
+
+stories.add('with formatted values', () => (
+
+ `${Number(value).toLocaleString('ru-RU', {
+ minimumFractionDigits: 2,
+ })} ₽`}
+ />
+))
diff --git a/stories/charts/line.stories.js b/stories/charts/line.stories.js
index c285c6889..8e0743e07 100644
--- a/stories/charts/line.stories.js
+++ b/stories/charts/line.stories.js
@@ -204,3 +204,20 @@ stories.add('with custom min/max Y', () => (
maxY={1}
/>
))
+
+stories.add('with formatted values', () => (
+
+ Number(value).toLocaleString('ru-RU', {
+ minimumFractionDigits: 2,
+ }),
+ }}
+ curve="monotoneX"
+ tooltipFormat={value =>
+ `${Number(value).toLocaleString('ru-RU', {
+ minimumFractionDigits: 2,
+ })} ₽`}
+ />
+))
diff --git a/stories/charts/pie.stories.js b/stories/charts/pie.stories.js
index 82ca6cd9a..edfc5723a 100644
--- a/stories/charts/pie.stories.js
+++ b/stories/charts/pie.stories.js
@@ -49,3 +49,13 @@ stories.add('custom radial label', () => (
enableSlicesLabels={false}
/>
))
+
+stories.add('with formatted values', () => (
+
+ `${Number(value).toLocaleString('ru-RU', {
+ minimumFractionDigits: 2,
+ })} ₽`}
+ />
+))
diff --git a/stories/charts/radar.stories.js b/stories/charts/radar.stories.js
index 2b7a4d5b4..735548518 100644
--- a/stories/charts/radar.stories.js
+++ b/stories/charts/radar.stories.js
@@ -81,3 +81,13 @@ stories.add('custom dot symbol', () => (
gridLabelOffset={36}
/>
))
+
+stories.add('with formatted values', () => (
+
+ `${Number(value).toLocaleString('ru-RU', {
+ minimumFractionDigits: 2,
+ })} ₽`}
+ />
+))
diff --git a/stories/charts/sankey.stories.js b/stories/charts/sankey.stories.js
index 1859259bd..fc1385754 100644
--- a/stories/charts/sankey.stories.js
+++ b/stories/charts/sankey.stories.js
@@ -51,3 +51,13 @@ stories.add('custom tooltip', () => (
)}
/>
))
+
+stories.add('with formatted values', () => (
+
+ `${Number(value).toLocaleString('ru-RU', {
+ minimumFractionDigits: 2,
+ })} ₽`}
+ />
+))
diff --git a/stories/charts/stream.stories.js b/stories/charts/stream.stories.js
index 5e34ab20c..a478f04d3 100644
--- a/stories/charts/stream.stories.js
+++ b/stories/charts/stream.stories.js
@@ -45,3 +45,13 @@ stories.add('regular stacked chart', () => (
))
stories.add('custom curve', () => )
+
+stories.add('with formatted values', () => (
+
+ `${Number(value).toLocaleString('ru-RU', {
+ minimumFractionDigits: 2,
+ })} ₽`}
+ />
+))