From 2cd5539dfc4c356cc63f904f006c590bba703f18 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 1 Jun 2021 11:30:45 +0100 Subject: [PATCH 01/14] Adding new theme value labels styling --- package.json | 2 +- src/themes/charts/themes.ts | 8 ++++++-- yarn.lock | 21 +++++++++++++++++---- 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 10ba99de437..b774bfc2a79 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,7 @@ "@babel/preset-env": "^7.11.0", "@babel/preset-react": "^7.10.4", "@babel/preset-typescript": "^7.12.1", - "@elastic/charts": "^24.5.1", + "@elastic/charts": "^29.2.0", "@elastic/datemath": "^5.0.3", "@elastic/eslint-config-kibana": "^0.15.0", "@svgr/core": "5.4.0", diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts index 37545792899..82662b77d08 100644 --- a/src/themes/charts/themes.ts +++ b/src/themes/charts/themes.ts @@ -112,9 +112,13 @@ function createTheme(colors: any): EuiChartThemeType { }, barSeriesStyle: { displayValue: { - fontSize: 8, + fontSize: 10, fontFamily: fontFamily, - fill: colors.euiColorDarkShade.rgba, + fill: { + textInvertible: true, + textContrast: true, + textBorder: 0.5, + }, }, }, scales: { diff --git a/yarn.lock b/yarn.lock index bad1a23f383..c575767eaeb 100755 --- a/yarn.lock +++ b/yarn.lock @@ -1009,15 +1009,16 @@ exec-sh "^0.3.2" minimist "^1.2.0" -"@elastic/charts@^24.5.1": - version "24.5.1" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-24.5.1.tgz#4757721b0323b15412c92d696dd76fdef9b963f8" - integrity sha512-eHJna3xyHREaSfTRb+3/34EmyoINopH6yP9KReakXRb0jW8DD4n9IkbPFwpVN3uXQ6ND2x1ObA0ZzLPSLCPozg== +"@elastic/charts@^29.2.0": + version "29.2.0" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-29.2.0.tgz#cd65887c0ca1d420493aee1b570c862ca0df5311" + integrity sha512-gj3Gew9zy8XPNEkAAznOjncO5AF63jy/X1k1VIcNPqdqMi07YYCZwCQjMzUVoS4RN6X4GSzxhrYfGAeyZP8gqg== dependencies: "@popperjs/core" "^2.4.0" chroma-js "^2.1.0" classnames "^2.2.6" d3-array "^1.2.4" + d3-cloud "^1.2.5" d3-collection "^1.0.7" d3-color "^1.4.0" d3-interpolate "^1.4.0" @@ -4756,6 +4757,13 @@ d3-array@^1.2.0, d3-array@^1.2.4: resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f" integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw== +d3-cloud@^1.2.5: + version "1.2.5" + resolved "https://registry.yarnpkg.com/d3-cloud/-/d3-cloud-1.2.5.tgz#3e91564f2d27fba47fcc7d812eb5081ea24c603d" + integrity sha512-4s2hXZgvs0CoUIw31oBAGrHt9Kt/7P9Ik5HIVzISFiWkD0Ga2VLAuO/emO/z1tYIpE7KG2smB4PhMPfFMJpahw== + dependencies: + d3-dispatch "^1.0.3" + d3-collection@1, d3-collection@^1.0.7: version "1.0.7" resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.7.tgz#349bd2aa9977db071091c13144d5e4f16b5b310e" @@ -4766,6 +4774,11 @@ d3-color@1, d3-color@^1.4.0: resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.4.1.tgz#c52002bf8846ada4424d55d97982fef26eb3bc8a" integrity sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q== +d3-dispatch@^1.0.3: + version "1.0.6" + resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.6.tgz#00d37bcee4dd8cd97729dd893a0ac29caaba5d58" + integrity sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA== + d3-format@1: version "1.4.5" resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4" From e1f3f7c36eb97da28a663f0c6d28efad65e5d126 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 26 Jul 2021 17:51:16 +0100 Subject: [PATCH 02/14] Setting `textBorder` to zero --- CHANGELOG.md | 1 + src/themes/charts/themes.ts | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6446084df96..5ea3d7a4513 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ - Updated `EuiText`s `color` prop to accept `inherit` and custom colors. Updated the `size` prop to accept `relative` ([#4663](https://github.com/elastic/eui/pull/4663)) - Updated `EuiText`s `blockquote` font-size/line-height to match the base font-size/line-height which is the same as paragraphs ([#4663](https://github.com/elastic/eui/pull/4663)) - Added `markdownFormatProps` prop to `EuiMarkdownEditor` to extend the props passed to the rendered `EuiMarkdownFormat` ([#4663](https://github.com/elastic/eui/pull/4663)) +- Updated `barSeriesStyle.displayValue` of the elastic charts `Theme` to allow `textInvertible` and `textContrast` enabled by default ([#4845](https://github.com/elastic/eui/pull/4845)) ## [`36.0.0`](https://github.com/elastic/eui/tree/v36.0.0) diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts index fa2ba504077..8fbfea61260 100644 --- a/src/themes/charts/themes.ts +++ b/src/themes/charts/themes.ts @@ -109,8 +109,10 @@ function createTheme(colors: any, mode: string): EuiChartThemeType { fill: { textInvertible: true, textContrast: true, - textBorder: 0.5, + textBorder: 0, }, + offsetX: 1, + offsetY: -1, }, }, scales: { From 56a8aabb7ba90f91839bdc0ccf336d8e0380ead1 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 26 Jul 2021 20:31:22 +0100 Subject: [PATCH 03/14] Adding `showValueLabels` field in MultiChartCard --- .../views/elastic_charts/category_chart.js | 33 +++++++++++++++++-- src-docs/src/views/elastic_charts/shared.js | 29 +++++++++++++++- 2 files changed, 58 insertions(+), 4 deletions(-) diff --git a/src-docs/src/views/elastic_charts/category_chart.js b/src-docs/src/views/elastic_charts/category_chart.js index 17ceb9f1f07..49a6c995478 100644 --- a/src-docs/src/views/elastic_charts/category_chart.js +++ b/src-docs/src/views/elastic_charts/category_chart.js @@ -38,11 +38,13 @@ export const CategoryChart = () => { const [ordered, setOrdered] = useState(true); const [formatted, setFormatted] = useState(false); const [chartType, setChartType] = useState('BarSeries'); + const [valueLabels, setValueLabels] = useState(false); const onMultiChange = (multiObject) => { - const { multi, stacked } = multiObject; + const { multi, stacked, valueLabels } = multiObject; setMulti(multi); setStacked(stacked); + setValueLabels(valueLabels); }; const onRotatedChange = (e) => { @@ -70,6 +72,30 @@ export const CategoryChart = () => { const DATASET = multi ? GITHUB_DATASET : SIMPLE_GITHUB_DATASET; + const displayValueSettings = { + showValueLabel: true, + }; + + const isHorizontalLayout = rotated; + + const customTheme = { + ...theme, + barSeriesStyle: { + displayValue: { + ...theme.barSeriesStyle.displayValue, + offsetX: isHorizontalLayout ? 2 : 0, + offsetY: isHorizontalLayout ? 0 : -2, + alignment: isHorizontalLayout + ? { + vertical: 'middle', + } + : { + horizontal: 'center', + }, + }, + }, + }; + return ( @@ -83,7 +109,7 @@ export const CategoryChart = () => { { yAccessors={['count']} splitSeriesAccessors={multi ? ['issueType'] : undefined} stackAccessors={stacked ? ['issueType'] : undefined} + displayValueSettings={valueLabels && displayValueSettings} /> { - + diff --git a/src-docs/src/views/elastic_charts/shared.js b/src-docs/src/views/elastic_charts/shared.js index 53a7f7cb2c4..b529c533853 100644 --- a/src-docs/src/views/elastic_charts/shared.js +++ b/src-docs/src/views/elastic_charts/shared.js @@ -114,6 +114,7 @@ ChartTypeCard.propTypes = { export const MultiChartCard = (props) => { const [multi, setMulti] = useState(false); const [stacked, setStacked] = useState(false); + const [valueLabels, setValueLabels] = useState(false); const onMultiChange = (e) => { const isStacked = e.target.checked ? stacked : false; @@ -124,14 +125,26 @@ export const MultiChartCard = (props) => { props.onChange({ multi: e.target.checked, stacked, + valueLabels: valueLabels, }); }; const onStackedChange = (e) => { setStacked(e.target.checked); - props.onChange({ multi: multi, stacked: e.target.checked }); + props.onChange({ multi, stacked: e.target.checked, valueLabels }); }; + + const onValueLabelsChange = (e) => { + setValueLabels(e.target.checked); + + props.onChange({ + multi: multi, + stacked: stacked, + valueLabels: e.target.checked, + }); + }; + return ( { checked={multi} onChange={onMultiChange} /> + + {props.showValueLabels && ( + <> + + + + )} + + Date: Tue, 27 Jul 2021 12:58:33 +0100 Subject: [PATCH 04/14] Increase category chart height --- src-docs/src/views/elastic_charts/category_chart.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/elastic_charts/category_chart.js b/src-docs/src/views/elastic_charts/category_chart.js index 49a6c995478..46d7542cf95 100644 --- a/src-docs/src/views/elastic_charts/category_chart.js +++ b/src-docs/src/views/elastic_charts/category_chart.js @@ -107,7 +107,7 @@ export const CategoryChart = () => { - + Date: Tue, 27 Jul 2021 13:32:59 +0100 Subject: [PATCH 05/14] Adding center alignment --- src/themes/charts/themes.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts index 8fbfea61260..d99be06d262 100644 --- a/src/themes/charts/themes.ts +++ b/src/themes/charts/themes.ts @@ -111,8 +111,10 @@ function createTheme(colors: any, mode: string): EuiChartThemeType { textContrast: true, textBorder: 0, }, - offsetX: 1, - offsetY: -1, + alignment: { + horizontal: 'center', + vertical: 'middle', + }, }, }, scales: { From 90166c334eab6be4f5081b69865bf541c5273d7c Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 27 Jul 2021 13:45:24 +0100 Subject: [PATCH 06/14] CL --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bb56a016812..7185c133130 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ - Updated `EuiText`s `color` prop to accept `inherit` and custom colors. Updated the `size` prop to accept `relative` ([#4663](https://github.com/elastic/eui/pull/4663)) - Updated `EuiText`s `blockquote` font-size/line-height to match the base font-size/line-height which is the same as paragraphs ([#4663](https://github.com/elastic/eui/pull/4663)) - Added `markdownFormatProps` prop to `EuiMarkdownEditor` to extend the props passed to the rendered `EuiMarkdownFormat` ([#4663](https://github.com/elastic/eui/pull/4663)) -- Updated `barSeriesStyle.displayValue` of the elastic charts `Theme` to allow `textInvertible` and `textContrast` enabled by default ([#4845](https://github.com/elastic/eui/pull/4845)) +- Updated `barSeriesStyle.displayValue` of the elastic charts `Theme` to get better styles by default ([#4845](https://github.com/elastic/eui/pull/4845)) - Added optional virtualized line rendering to `EuiCodeBlock` ([#4952](https://github.com/elastic/eui/pull/4952)) ## [`36.0.0`](https://github.com/elastic/eui/tree/v36.0.0) From 69e1ab3a88146454fbea249d946351bbdf7cbf73 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 27 Jul 2021 16:56:57 +0100 Subject: [PATCH 07/14] Shared comp improvement --- src-docs/src/views/elastic_charts/shared.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/elastic_charts/shared.js b/src-docs/src/views/elastic_charts/shared.js index b529c533853..d1c84644d98 100644 --- a/src-docs/src/views/elastic_charts/shared.js +++ b/src-docs/src/views/elastic_charts/shared.js @@ -125,7 +125,7 @@ export const MultiChartCard = (props) => { props.onChange({ multi: e.target.checked, stacked, - valueLabels: valueLabels, + valueLabels, }); }; @@ -184,5 +184,8 @@ MultiChartCard.propTypes = { * Returns (multi:boolean, stacked:boolean) */ onChange: PropTypes.func.isRequired, + /** + * Show a switch button to enable/disable value labels + */ showValueLabels: PropTypes.bool, }; From 8d1242f1b58f0a4710525171b0cb4fafe7e972a4 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 28 Jul 2021 12:15:51 +0100 Subject: [PATCH 08/14] Update CHANGELOG.md Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7185c133130..f7aa82571bb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ - Updated `EuiText`s `color` prop to accept `inherit` and custom colors. Updated the `size` prop to accept `relative` ([#4663](https://github.com/elastic/eui/pull/4663)) - Updated `EuiText`s `blockquote` font-size/line-height to match the base font-size/line-height which is the same as paragraphs ([#4663](https://github.com/elastic/eui/pull/4663)) - Added `markdownFormatProps` prop to `EuiMarkdownEditor` to extend the props passed to the rendered `EuiMarkdownFormat` ([#4663](https://github.com/elastic/eui/pull/4663)) -- Updated `barSeriesStyle.displayValue` of the elastic charts `Theme` to get better styles by default ([#4845](https://github.com/elastic/eui/pull/4845)) +- Updated `barSeriesStyle.displayValue` of the elastic-charts `Theme` for better default styles ([#4845](https://github.com/elastic/eui/pull/4845)) - Added optional virtualized line rendering to `EuiCodeBlock` ([#4952](https://github.com/elastic/eui/pull/4952)) ## [`36.0.0`](https://github.com/elastic/eui/tree/v36.0.0) From 7973a88c376a4a14428b71b091f317fb20ede2eb Mon Sep 17 00:00:00 2001 From: miukimiu Date: Wed, 28 Jul 2021 18:23:04 +0100 Subject: [PATCH 09/14] Adding value labels card and config text to copy. --- .../views/elastic_charts/category_chart.js | 158 +++++++++++++----- src-docs/src/views/elastic_charts/shared.js | 32 +--- 2 files changed, 116 insertions(+), 74 deletions(-) diff --git a/src-docs/src/views/elastic_charts/category_chart.js b/src-docs/src/views/elastic_charts/category_chart.js index 46d7542cf95..9a28b8b070a 100644 --- a/src-docs/src/views/elastic_charts/category_chart.js +++ b/src-docs/src/views/elastic_charts/category_chart.js @@ -39,12 +39,12 @@ export const CategoryChart = () => { 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, valueLabels } = multiObject; + const { multi, stacked } = multiObject; setMulti(multi); setStacked(stacked); - setValueLabels(valueLabels); }; const onRotatedChange = (e) => { @@ -63,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 @@ -76,26 +84,101 @@ export const CategoryChart = () => { showValueLabel: true, }; - const isHorizontalLayout = rotated; - const customTheme = { ...theme, barSeriesStyle: { displayValue: { ...theme.barSeriesStyle.displayValue, - offsetX: isHorizontalLayout ? 2 : 0, - offsetY: isHorizontalLayout ? 0 : -2, - alignment: isHorizontalLayout + offsetX: rotated ? 2 : 0, + offsetY: rotated ? 0 : -2, + ...(valueLabelsCenter ? { - vertical: 'middle', + alignment: { + vertical: 'middle', + horizontal: 'center', + }, } : { - 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 = ` + + <${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}}' : ''} + /> + + `${round(Number(d) / 1000, 2)}k`}' : ''} + /> +`; + + const removeEmptyLines = (string) => string.replace(/(^[ \t]*\n)/gm, ''); + + const textToCopy = `${chartVariablesToCopy} + +${removeEmptyLines(chartConfigurationToCopy)} + `; + return ( @@ -193,45 +276,34 @@ export const CategoryChart = () => { - + + + + + + + + + +
- - - <${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']}" : ''} - /> - - `${round(Number(d) / 1000, 2)}k`}' : ''} - /> -`}> + {(copy) => ( Copy code of current configuration diff --git a/src-docs/src/views/elastic_charts/shared.js b/src-docs/src/views/elastic_charts/shared.js index d1c84644d98..53a7f7cb2c4 100644 --- a/src-docs/src/views/elastic_charts/shared.js +++ b/src-docs/src/views/elastic_charts/shared.js @@ -114,7 +114,6 @@ ChartTypeCard.propTypes = { export const MultiChartCard = (props) => { const [multi, setMulti] = useState(false); const [stacked, setStacked] = useState(false); - const [valueLabels, setValueLabels] = useState(false); const onMultiChange = (e) => { const isStacked = e.target.checked ? stacked : false; @@ -125,26 +124,14 @@ export const MultiChartCard = (props) => { props.onChange({ multi: e.target.checked, stacked, - valueLabels, }); }; const onStackedChange = (e) => { setStacked(e.target.checked); - props.onChange({ multi, stacked: e.target.checked, valueLabels }); + props.onChange({ multi: multi, stacked: e.target.checked }); }; - - const onValueLabelsChange = (e) => { - setValueLabels(e.target.checked); - - props.onChange({ - multi: multi, - stacked: stacked, - valueLabels: e.target.checked, - }); - }; - return ( { checked={multi} onChange={onMultiChange} /> - - {props.showValueLabels && ( - <> - - - - )} - - Date: Thu, 9 Sep 2021 17:08:18 +0100 Subject: [PATCH 10/14] Adding multi and stacked centered --- .../src/views/elastic_charts/category_chart.js | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/src-docs/src/views/elastic_charts/category_chart.js b/src-docs/src/views/elastic_charts/category_chart.js index fa15450f08e..1c69b427d31 100644 --- a/src-docs/src/views/elastic_charts/category_chart.js +++ b/src-docs/src/views/elastic_charts/category_chart.js @@ -39,8 +39,6 @@ export const CategoryChart = () => { 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; setMulti(multi); @@ -67,10 +65,6 @@ export const CategoryChart = () => { 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 @@ -91,7 +85,7 @@ export const CategoryChart = () => { ...theme.barSeriesStyle.displayValue, offsetX: rotated ? 2 : 0, offsetY: rotated ? 0 : -2, - ...(valueLabelsCenter + ...(multi && stacked ? { alignment: { vertical: 'middle', @@ -135,7 +129,7 @@ const customTheme = { ...theme.barSeriesStyle.displayValue, offsetX: ${rotated ? '2' : '0'}, offsetY: ${rotated ? '0' : '-2'}, - ${valueLabelsCenter ? defaultAlignmentToCopy : alignmentRotatedToCopy}, + ${multi && stacked ? defaultAlignmentToCopy : alignmentRotatedToCopy}, }, };`; @@ -292,13 +286,6 @@ ${removeEmptyLines(chartConfigurationToCopy)} checked={valueLabels} onChange={onValueLabelsChange} /> - - From 924eaf83ec4e5359c258caf5f3a64cd73d496c48 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Thu, 9 Sep 2021 17:09:37 +0100 Subject: [PATCH 11/14] CL --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9fa91d3ae89..d1023c3dc46 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ - Refactored styles of `EuiTabs` ([#5135](https://github.com/elastic/eui/pull/5135)) - Removed Sass variables for `EuiTabs` font size (`$euiTabFontSize, $euiTabFontSizeS, $euiTabFontSizeL`) ([#5135](https://github.com/elastic/eui/pull/5135)) - Extended all `EuiTabProps` for each `EuiTabbedContentTab` ([#5135](https://github.com/elastic/eui/pull/5135)) +- Updated `barSeriesStyle.displayValue` of the elastic-charts `Theme` for better default styles ([#4845](https://github.com/elastic/eui/pull/4845)) **Theme: Amsterdam** @@ -170,7 +171,6 @@ - Updated `EuiText`s `color` prop to accept `inherit` and custom colors. Updated the `size` prop to accept `relative` ([#4663](https://github.com/elastic/eui/pull/4663)) - Updated `EuiText`s `blockquote` font-size/line-height to match the base font-size/line-height which is the same as paragraphs ([#4663](https://github.com/elastic/eui/pull/4663)) - Added `markdownFormatProps` prop to `EuiMarkdownEditor` to extend the props passed to the rendered `EuiMarkdownFormat` ([#4663](https://github.com/elastic/eui/pull/4663)) -- Updated `barSeriesStyle.displayValue` of the elastic-charts `Theme` for better default styles ([#4845](https://github.com/elastic/eui/pull/4845)) - Added optional virtualized line rendering to `EuiCodeBlock` ([#4952](https://github.com/elastic/eui/pull/4952)) - Added `current` as a `status` of `EuiHorizontalStep` ([#4911](https://github.com/elastic/eui/pull/4911)) - Improved accessibility of `EuiBreadcrumbs` ([#4763](https://github.com/elastic/eui/pull/4763)) From 91e91f59a636d7e0ea5573247fdb7fa99f26d7a7 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Thu, 9 Sep 2021 18:14:50 +0100 Subject: [PATCH 12/14] Adding better data for multi series and removing lodash orderBy --- .../views/elastic_charts/category_chart.js | 27 ++++++++++++++----- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/src-docs/src/views/elastic_charts/category_chart.js b/src-docs/src/views/elastic_charts/category_chart.js index 1c69b427d31..a0f2a9e87d2 100644 --- a/src-docs/src/views/elastic_charts/category_chart.js +++ b/src-docs/src/views/elastic_charts/category_chart.js @@ -130,9 +130,24 @@ const customTheme = { offsetX: ${rotated ? '2' : '0'}, offsetY: ${rotated ? '0' : '-2'}, ${multi && stacked ? defaultAlignmentToCopy : alignmentRotatedToCopy}, + }, }, };`; + const multiConfigData = `[ + { vizType: "Data Table", count: 6, issueType: "Bug" }, + { vizType: "Data Table", count: 24, issueType: "Other" }, + { vizType: "Heatmap", count: 12, issueType: "Bug" }, + { vizType: "Heatmap", count: 20, issueType: "Other" } + ] +`; + + const singleConfigData = `[ + {vizType: 'Data Table', count: 24, issueType: 'Bug'}, + {vizType: 'Heatmap',count: 12, issueType: 'Other'} + ] +`; + const chartConfigurationToCopy = ` `${round(Number(d) / 1000, 2)}k`}' : ''} /> `; From d3c215ce064a7c1bd1c7b36fd46df05169533157 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Thu, 9 Sep 2021 18:42:39 +0100 Subject: [PATCH 13/14] Better indentation --- src-docs/src/views/elastic_charts/category_chart.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src-docs/src/views/elastic_charts/category_chart.js b/src-docs/src/views/elastic_charts/category_chart.js index a0f2a9e87d2..3834c0c18b4 100644 --- a/src-docs/src/views/elastic_charts/category_chart.js +++ b/src-docs/src/views/elastic_charts/category_chart.js @@ -134,18 +134,14 @@ const customTheme = { }, };`; - const multiConfigData = `[ - { vizType: "Data Table", count: 6, issueType: "Bug" }, + const multiConfigData = `[{ vizType: "Data Table", count: 6, issueType: "Bug" }, { vizType: "Data Table", count: 24, issueType: "Other" }, { vizType: "Heatmap", count: 12, issueType: "Bug" }, - { vizType: "Heatmap", count: 20, issueType: "Other" } - ] + { vizType: "Heatmap", count: 20, issueType: "Other" }] `; - const singleConfigData = `[ - {vizType: 'Data Table', count: 24, issueType: 'Bug'}, - {vizType: 'Heatmap',count: 12, issueType: 'Other'} - ] + const singleConfigData = `[{vizType: 'Data Table', count: 24, issueType: 'Bug'}, + {vizType: 'Heatmap',count: 12, issueType: 'Other'}] `; const chartConfigurationToCopy = ` From 9a1937132fe77a4f401f6be12b2288fa1183e389 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Thu, 16 Sep 2021 15:39:49 +0100 Subject: [PATCH 14/14] Custom theme only when value labels. Small styles fixes. --- .../views/elastic_charts/category_chart.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src-docs/src/views/elastic_charts/category_chart.js b/src-docs/src/views/elastic_charts/category_chart.js index 3834c0c18b4..9ad087fdb87 100644 --- a/src-docs/src/views/elastic_charts/category_chart.js +++ b/src-docs/src/views/elastic_charts/category_chart.js @@ -83,8 +83,8 @@ export const CategoryChart = () => { barSeriesStyle: { displayValue: { ...theme.barSeriesStyle.displayValue, - offsetX: rotated ? 2 : 0, - offsetY: rotated ? 0 : -2, + offsetX: rotated ? 4 : 0, + offsetY: rotated ? 0 : -4, ...(multi && stacked ? { alignment: { @@ -118,7 +118,7 @@ export const CategoryChart = () => { horizontal: 'center', }`; - const chartVariablesToCopy = `const theme = isDarkTheme + const chartVariablesForValueLabels = `const theme = isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; @@ -127,8 +127,8 @@ const customTheme = { barSeriesStyle: { displayValue: { ...theme.barSeriesStyle.displayValue, - offsetX: ${rotated ? '2' : '0'}, - offsetY: ${rotated ? '0' : '-2'}, + offsetX: ${rotated ? '4' : '0'}, + offsetY: ${rotated ? '0' : '-4'}, ${multi && stacked ? defaultAlignmentToCopy : alignmentRotatedToCopy}, }, }, @@ -146,7 +146,7 @@ const customTheme = { const chartConfigurationToCopy = ` string.replace(/(^[ \t]*\n)/gm, ''); - const textToCopy = `${chartVariablesToCopy} + const textToCopy = valueLabels + ? `${chartVariablesForValueLabels} -${removeEmptyLines(chartConfigurationToCopy)} - `; +${removeEmptyLines(chartConfigurationToCopy)}` + : `${removeEmptyLines(chartConfigurationToCopy)}`; return (