[Elastic Charts] Added value labels styles for bar charts #4845
+144
−38
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -38,6 +38,8 @@ export const CategoryChart = () => { | |
| const [ordered, setOrdered] = useState(true); | ||
| const [formatted, setFormatted] = useState(false); | ||
| const [chartType, setChartType] = useState('BarSeries'); | ||
| const [valueLabels, setValueLabels] = useState(false); | ||
| const [valueLabelsCenter, setValueLabelsCenter] = useState(false); | ||
|
|
||
| const onMultiChange = (multiObject) => { | ||
| const { multi, stacked } = multiObject; | ||
|
|
@@ -61,6 +63,14 @@ export const CategoryChart = () => { | |
| setChartType(chartType); | ||
| }; | ||
|
|
||
| const onValueLabelsChange = (e) => { | ||
| setValueLabels(e.target.checked); | ||
| }; | ||
|
|
||
| const onValueLabelsCenterChange = (e) => { | ||
| setValueLabelsCenter(e.target.checked); | ||
| }; | ||
|
|
||
| const isDarkTheme = themeContext.theme.includes('dark'); | ||
| const theme = isDarkTheme | ||
| ? EUI_CHARTS_THEME_DARK.theme | ||
|
|
@@ -70,6 +80,105 @@ export const CategoryChart = () => { | |
|
|
||
| const DATASET = multi ? GITHUB_DATASET : SIMPLE_GITHUB_DATASET; | ||
|
|
||
| const displayValueSettings = { | ||
| showValueLabel: true, | ||
| }; | ||
|
|
||
| const customTheme = { | ||
| ...theme, | ||
| barSeriesStyle: { | ||
| displayValue: { | ||
| ...theme.barSeriesStyle.displayValue, | ||
| offsetX: rotated ? 2 : 0, | ||
| offsetY: rotated ? 0 : -2, | ||
| ...(valueLabelsCenter | ||
| ? { | ||
| alignment: { | ||
| vertical: 'middle', | ||
| horizontal: 'center', | ||
| }, | ||
| } | ||
| : { | ||
| alignment: rotated | ||
| ? { | ||
| vertical: 'middle', | ||
| } | ||
| : { | ||
| horizontal: 'center', | ||
| }, | ||
| }), | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| const defaultAlignmentToCopy = `alignment: { | ||
| vertical: 'middle', | ||
| horizontal: 'center', | ||
| }`; | ||
|
|
||
| const alignmentRotatedToCopy = rotated | ||
| ? `alignment: { | ||
| vertical: 'middle', | ||
| }` | ||
| : `alignment: { | ||
| horizontal: 'center', | ||
| }`; | ||
|
|
||
| const chartVariablesToCopy = `const theme = isDarkTheme | ||
| ? EUI_CHARTS_THEME_DARK.theme | ||
| : EUI_CHARTS_THEME_LIGHT.theme; | ||
|
|
||
| const customTheme = { | ||
| ...theme, | ||
| barSeriesStyle: { | ||
| displayValue: { | ||
| ...theme.barSeriesStyle.displayValue, | ||
| offsetX: ${rotated ? '2' : '0'}, | ||
| offsetY: ${rotated ? '0' : '-2'}, | ||
| ${valueLabelsCenter ? defaultAlignmentToCopy : alignmentRotatedToCopy}, | ||
| }, | ||
| };`; | ||
|
|
||
| const chartConfigurationToCopy = `<Chart size={{height: 300}}> | ||
| <Settings | ||
| theme={customTheme} | ||
| rotation={${rotated ? 90 : 0}} | ||
| showLegend={${multi}} | ||
| ${multi ? 'legendPosition="right"' : ''} | ||
| /> | ||
| <${chartType} | ||
| id="issues" | ||
| name="Issues" | ||
| data={${ | ||
| ordered | ||
| ? "orderBy([{vizType: 'Data Table', count: 24, issueType: 'Bug'},{vizType: 'Heatmap',count: 12, issueType: 'Other'}], ['count'], ['desc'])" | ||
| : "orderBy([{vizType: 'Data Table', count: 24, issueType: 'Bug'},{vizType: 'Heatmap',count: 12, issueType: 'Other'}], ['vizType'], ['asc'])" | ||
| }} | ||
| xAccessor="vizType" | ||
| yAccessors={['count']} | ||
| ${multi ? "splitSeriesAccessors={['issueType']}" : ''} | ||
| ${stacked ? "stackAccessors={['issueType']}" : ''} | ||
| ${valueLabels ? 'displayValueSettings={{showValueLabel: true}}' : ''} | ||
| /> | ||
| <Axis | ||
| id="bottom-axis" | ||
| position={${rotated ? 'left' : 'bottom'}} | ||
| showGridLines={false} | ||
| /> | ||
| <Axis | ||
| id="left-axis" | ||
| position={${rotated ? 'bottom' : 'left'}} | ||
| ${formatted ? 'tickFormat={d => `${round(Number(d) / 1000, 2)}k`}' : ''} | ||
|
There was a problem hiding this comment. @markov00 The one thing I noticed is that when we format the tick labels on a particular axis, it does also get applied to the
There was a problem hiding this comment. thank you @cchaos you are right, this is an issue in our code. I will check and fix the bug soon. |
||
| /> | ||
| </Chart>`; | ||
|
|
||
| const removeEmptyLines = (string) => string.replace(/(^[ \t]*\n)/gm, ''); | ||
|
|
||
| const textToCopy = `${chartVariablesToCopy} | ||
|
|
||
| ${removeEmptyLines(chartConfigurationToCopy)} | ||
| `; | ||
elizabetdev marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| return ( | ||
| <Fragment> | ||
| <EuiTitle size="xxs"> | ||
|
|
@@ -81,9 +190,9 @@ export const CategoryChart = () => { | |
|
|
||
| <EuiSpacer size="s" /> | ||
|
|
||
| <Chart size={{ height: 400 }}> | ||
| <Settings | ||
| theme={customTheme} | ||
elizabetdev marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| showLegend={multi} | ||
| legendPosition="right" | ||
| rotation={rotated ? 90 : 0} | ||
|
|
@@ -100,6 +209,7 @@ export const CategoryChart = () => { | |
| yAccessors={['count']} | ||
| splitSeriesAccessors={multi ? ['issueType'] : undefined} | ||
| stackAccessors={stacked ? ['issueType'] : undefined} | ||
| displayValueSettings={valueLabels && displayValueSettings} | ||
| /> | ||
| <Axis | ||
| id="bottom-axis" | ||
|
|
@@ -168,43 +278,32 @@ export const CategoryChart = () => { | |
| <EuiFlexItem> | ||
| <MultiChartCard onChange={onMultiChange} /> | ||
| </EuiFlexItem> | ||
|
|
||
| <EuiFlexItem> | ||
| <ChartCard | ||
| title="Value labels" | ||
| description="Value labels can add too much detail and make categorical charts more difficult to interpret. Consider showing them only when the values are of extreme importance."> | ||
| <EuiSpacer size="s" /> | ||
| <EuiSwitch | ||
| label="Show value labels" | ||
| checked={valueLabels} | ||
| onChange={onValueLabelsChange} | ||
| /> | ||
| <EuiSpacer size="s" /> | ||
| <EuiSwitch | ||
| label="Center value labels" | ||
| checked={valueLabelsCenter} | ||
| onChange={onValueLabelsCenterChange} | ||
| disabled={!valueLabels} | ||
| /> | ||
| </ChartCard> | ||
| </EuiFlexItem> | ||
| </EuiFlexGrid> | ||
|
|
||
| <EuiSpacer /> | ||
|
|
||
| <div className="eui-textCenter"> | ||
| <EuiCopy textToCopy={textToCopy}> | ||
| {(copy) => ( | ||
| <EuiButton fill onClick={copy} iconType="copyClipboard"> | ||
| Copy code of current configuration | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
From what I see, this is used as padding on the text. We can probably introduce a default or custom padding and we can get rid of this part
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
elastic/elastic-charts#1375
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree 👍🏽
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Optional, but I'd love to see even more separation.