diff --git a/.eslintrc.js b/.eslintrc.js index 82c477226a..31e6eb873a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -153,14 +153,7 @@ module.exports = { ignoreRegExpLiterals: true, }, ], - 'no-unused-vars': [ - 'error', - { - vars: 'all', - args: 'after-used', - ignoreRestSiblings: true, - }, - ], + 'no-unused-vars': 0, 'sort-keys': 0, 'no-irregular-whitespace': 'warn', 'no-unused-expressions': 'error', diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-flame-alpha-flame-chart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-flame-alpha-flame-chart-visually-looks-correct-1-snap.png index 334d912c78..9a7aa1ffbc 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-flame-alpha-flame-chart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-flame-alpha-flame-chart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-flame-alpha-icicle-chart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-flame-alpha-icicle-chart-visually-looks-correct-1-snap.png index cf19520c15..762483f2a4 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-flame-alpha-icicle-chart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-flame-alpha-icicle-chart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png index 70b8e9e987..86ea3b0d74 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-piechart-repeated-labels-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-piechart-repeated-labels-visually-looks-correct-1-snap.png index ab20933833..0f4e1c2fac 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-piechart-repeated-labels-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-piechart-repeated-labels-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-piechart-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-piechart-visually-looks-correct-1-snap.png index 7dd0ed1d91..726c501bf1 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-piechart-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-legend-piechart-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mosaic-alpha-simple-mosaic-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mosaic-alpha-simple-mosaic-visually-looks-correct-1-snap.png index be2d58f31e..4cacd3e216 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mosaic-alpha-simple-mosaic-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mosaic-alpha-simple-mosaic-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-sunbursts-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-sunbursts-visually-looks-correct-1-snap.png index 147a5864ca..8bb9ea11c2 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-sunbursts-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-small-multiples-alpha-sunbursts-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partition-background-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partition-background-visually-looks-correct-1-snap.png index aa2b4005fb..71b28fc598 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partition-background-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-partition-background-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-custom-stroke-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-custom-stroke-visually-looks-correct-1-snap.png index db94ab7b1d..1d417130f5 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-custom-stroke-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-custom-stroke-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-custom-tooltip-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-custom-tooltip-visually-looks-correct-1-snap.png index 4582995729..15313c7296 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-custom-tooltip-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-custom-tooltip-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-donut-chart-with-fill-labels-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-donut-chart-with-fill-labels-visually-looks-correct-1-snap.png index acf0ca6fc3..a78c348091 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-donut-chart-with-fill-labels-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-donut-chart-with-fill-labels-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-sunburst-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-sunburst-visually-looks-correct-1-snap.png index 48fe53d128..15bdac17ad 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-sunburst-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-single-sunburst-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-some-zero-value-slice-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-some-zero-value-slice-visually-looks-correct-1-snap.png index 04b908195c..2cb82cb1bb 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-some-zero-value-slice-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-some-zero-value-slice-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-sunburst-with-three-layers-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-sunburst-with-three-layers-visually-looks-correct-1-snap.png index 679e647bfb..7df6d1efae 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-sunburst-with-three-layers-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-sunburst-with-three-layers-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-sunburst-with-two-layers-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-sunburst-with-two-layers-visually-looks-correct-1-snap.png index 4582995729..15313c7296 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-sunburst-with-two-layers-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-sunburst-sunburst-with-two-layers-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-rtl-text-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-rtl-text-visually-looks-correct-1-snap.png index 1b970a0a83..4f17dcec2a 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-rtl-text-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-rtl-text-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png index d37dd2ee37..b0159c7b7e 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-three-layer-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-three-layer-visually-looks-correct-1-snap.png index 551a58eb42..a54ce3f538 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-three-layer-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-three-layer-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-two-layers-stress-test-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-two-layers-stress-test-visually-looks-correct-1-snap.png index ebc580aef4..a1a2f680a1 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-two-layers-stress-test-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-treemap-two-layers-stress-test-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-waffle-alpha-simple-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-waffle-alpha-simple-visually-looks-correct-1-snap.png index c62d967a4d..6650404ffe 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-waffle-alpha-simple-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-waffle-alpha-simple-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/dark-mode-test-ts-small-multiples-dark-mode-renders-panel-titles-1-snap.png b/integration/tests/__image_snapshots__/dark-mode-test-ts-small-multiples-dark-mode-renders-panel-titles-1-snap.png index a525d41109..6f6b172248 100644 Binary files a/integration/tests/__image_snapshots__/dark-mode-test-ts-small-multiples-dark-mode-renders-panel-titles-1-snap.png and b/integration/tests/__image_snapshots__/dark-mode-test-ts-small-multiples-dark-mode-renders-panel-titles-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png index 3d4b16b213..8de4fde395 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-extra-values-should-display-flat-legend-extra-values-on-sunburst-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-extra-values-should-display-flat-legend-extra-values-on-sunburst-1-snap.png index 036dd50839..af40bfdae0 100644 Binary files a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-extra-values-should-display-flat-legend-extra-values-on-sunburst-1-snap.png and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-extra-values-should-display-flat-legend-extra-values-on-sunburst-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-extra-values-should-display-flat-legend-extra-values-on-treemap-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-extra-values-should-display-flat-legend-extra-values-on-treemap-1-snap.png index 4db277a7ee..8e6b367036 100644 Binary files a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-extra-values-should-display-flat-legend-extra-values-on-treemap-1-snap.png and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-extra-values-should-display-flat-legend-extra-values-on-treemap-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-extra-values-should-display-nested-legend-extra-values-on-sunburst-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-extra-values-should-display-nested-legend-extra-values-on-sunburst-1-snap.png index 10b8d01973..c98352ea5e 100644 Binary files a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-extra-values-should-display-nested-legend-extra-values-on-sunburst-1-snap.png and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-extra-values-should-display-nested-legend-extra-values-on-sunburst-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-extra-values-should-display-nested-legend-extra-values-on-treemap-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-extra-values-should-display-nested-legend-extra-values-on-treemap-1-snap.png index afd88c6e13..77091f81b0 100644 Binary files a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-extra-values-should-display-nested-legend-extra-values-on-treemap-1-snap.png and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-extra-values-should-display-nested-legend-extra-values-on-treemap-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-correctly-render-multiline-nested-legend-labels-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-correctly-render-multiline-nested-legend-labels-1-snap.png index 2aa8799121..55fed0411a 100644 Binary files a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-correctly-render-multiline-nested-legend-labels-1-snap.png and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-correctly-render-multiline-nested-legend-labels-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-have-the-same-order-as-nested-with-no-indent-even-if-there-are-repeated-labels-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-have-the-same-order-as-nested-with-no-indent-even-if-there-are-repeated-labels-1-snap.png index 54af0e87da..5b40bafd92 100644 Binary files a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-have-the-same-order-as-nested-with-no-indent-even-if-there-are-repeated-labels-1-snap.png and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-have-the-same-order-as-nested-with-no-indent-even-if-there-are-repeated-labels-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-black-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-black-text-color-1-snap.png index f98491ab7f..53010ca47e 100644 Binary files a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-black-text-color-1-snap.png and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-black-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-black-translucent-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-black-translucent-text-color-1-snap.png index 511b727766..85afee3406 100644 Binary files a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-black-translucent-text-color-1-snap.png and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-black-translucent-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-red-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-red-text-color-1-snap.png index c3b8be9066..be9ab03420 100644 Binary files a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-red-text-color-1-snap.png and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-red-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-white-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-white-text-color-1-snap.png index 8d5a9966ce..944aa8591a 100644 Binary files a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-white-text-color-1-snap.png and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-white-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-white-translucent-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-white-translucent-text-color-1-snap.png index 46bec451f2..cf0b44ce62 100644 Binary files a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-white-translucent-text-color-1-snap.png and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-white-translucent-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-default-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-default-text-color-1-snap.png index f98491ab7f..944aa8591a 100644 Binary files a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-default-text-color-1-snap.png and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-default-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-black-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-black-text-color-1-snap.png index acffc8f90e..be269f6fbd 100644 Binary files a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-black-text-color-1-snap.png and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-black-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-black-translucent-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-black-translucent-text-color-1-snap.png index be2dc93da5..cc6102c129 100644 Binary files a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-black-translucent-text-color-1-snap.png and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-black-translucent-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-red-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-red-text-color-1-snap.png index 8634cfe3b7..dc12271217 100644 Binary files a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-red-text-color-1-snap.png and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-red-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-white-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-white-text-color-1-snap.png index 80b2f695e7..c83ff8cd29 100644 Binary files a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-white-text-color-1-snap.png and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-white-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-white-translucent-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-white-translucent-text-color-1-snap.png index 98603ccc05..20c0cd681a 100644 Binary files a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-white-translucent-text-color-1-snap.png and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-white-translucent-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-default-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-default-text-color-1-snap.png index 80b2f695e7..c83ff8cd29 100644 Binary files a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-default-text-color-1-snap.png and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-default-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-should-render-link-labels-with-fallback-text-color-for-dark-theme-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-should-render-link-labels-with-fallback-text-color-for-dark-theme-1-snap.png new file mode 100644 index 0000000000..960ef01fcb Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-should-render-link-labels-with-fallback-text-color-for-dark-theme-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-should-render-link-labels-with-fallback-text-color-for-eui-dark-theme-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-should-render-link-labels-with-fallback-text-color-for-eui-dark-theme-1-snap.png new file mode 100644 index 0000000000..5904abd08a Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-should-render-link-labels-with-fallback-text-color-for-eui-dark-theme-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-should-render-link-labels-with-fallback-text-color-for-eui-light-theme-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-should-render-link-labels-with-fallback-text-color-for-eui-light-theme-1-snap.png new file mode 100644 index 0000000000..c814005d83 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-should-render-link-labels-with-fallback-text-color-for-eui-light-theme-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-should-render-link-labels-with-fallback-text-color-for-light-theme-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-should-render-link-labels-with-fallback-text-color-for-light-theme-1-snap.png new file mode 100644 index 0000000000..f8e870ba01 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-should-render-link-labels-with-fallback-text-color-for-light-theme-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-test-ts-partition-should-render-link-labels-with-fallback-text-color-for-dark-theme-1-snap.png b/integration/tests/__image_snapshots__/partition-test-ts-partition-should-render-link-labels-with-fallback-text-color-for-dark-theme-1-snap.png new file mode 100644 index 0000000000..960ef01fcb Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-test-ts-partition-should-render-link-labels-with-fallback-text-color-for-dark-theme-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-test-ts-partition-should-render-link-labels-with-fallback-text-color-for-eui-dark-theme-1-snap.png b/integration/tests/__image_snapshots__/partition-test-ts-partition-should-render-link-labels-with-fallback-text-color-for-eui-dark-theme-1-snap.png new file mode 100644 index 0000000000..5904abd08a Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-test-ts-partition-should-render-link-labels-with-fallback-text-color-for-eui-dark-theme-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-test-ts-partition-should-render-link-labels-with-fallback-text-color-for-eui-light-theme-1-snap.png b/integration/tests/__image_snapshots__/partition-test-ts-partition-should-render-link-labels-with-fallback-text-color-for-eui-light-theme-1-snap.png new file mode 100644 index 0000000000..c814005d83 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-test-ts-partition-should-render-link-labels-with-fallback-text-color-for-eui-light-theme-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-test-ts-partition-should-render-link-labels-with-fallback-text-color-for-light-theme-1-snap.png b/integration/tests/__image_snapshots__/partition-test-ts-partition-should-render-link-labels-with-fallback-text-color-for-light-theme-1-snap.png new file mode 100644 index 0000000000..f8e870ba01 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-test-ts-partition-should-render-link-labels-with-fallback-text-color-for-light-theme-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-ltr-text-should-render-with-correct-direction-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-ltr-text-should-render-with-correct-direction-1-snap.png index 3c99269b3f..0676ae50f9 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-ltr-text-should-render-with-correct-direction-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-ltr-text-should-render-with-correct-direction-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png index 09b1e38b64..75409733fa 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-mostly-ltr-text-should-render-with-correct-direction-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-mostly-ltr-text-should-render-with-correct-direction-1-snap.png index 34c2c9cb93..7b3fda8e96 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-mostly-ltr-text-should-render-with-correct-direction-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-mostly-ltr-text-should-render-with-correct-direction-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-mostly-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-mostly-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png index cdb14bb911..0db6cffbba 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-mostly-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-mostly-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-mostly-rtl-text-should-render-with-correct-direction-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-mostly-rtl-text-should-render-with-correct-direction-1-snap.png index b91e7df3ab..05e173a8d8 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-mostly-rtl-text-should-render-with-correct-direction-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-mostly-rtl-text-should-render-with-correct-direction-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-mostly-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-mostly-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png index 582b3e5438..82c5db83f1 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-mostly-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-mostly-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-rtl-text-should-render-with-correct-direction-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-rtl-text-should-render-with-correct-direction-1-snap.png index 4db1a22e0b..49f17addaf 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-rtl-text-should-render-with-correct-direction-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-rtl-text-should-render-with-correct-direction-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png index 698352162c..49daa63945 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-ar-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-ltr-text-should-render-with-correct-direction-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-ltr-text-should-render-with-correct-direction-1-snap.png index 3c99269b3f..0676ae50f9 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-ltr-text-should-render-with-correct-direction-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-ltr-text-should-render-with-correct-direction-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png index 09b1e38b64..75409733fa 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-mostly-ltr-text-should-render-with-correct-direction-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-mostly-ltr-text-should-render-with-correct-direction-1-snap.png index d672e1760a..411d27b74c 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-mostly-ltr-text-should-render-with-correct-direction-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-mostly-ltr-text-should-render-with-correct-direction-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-mostly-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-mostly-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png index 197f73fd72..0a8fb12297 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-mostly-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-mostly-ltr-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-mostly-rtl-text-should-render-with-correct-direction-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-mostly-rtl-text-should-render-with-correct-direction-1-snap.png index 05942dd35e..94c7f9efac 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-mostly-rtl-text-should-render-with-correct-direction-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-mostly-rtl-text-should-render-with-correct-direction-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-mostly-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-mostly-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png index 0f895eddf5..951fbd9cc8 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-mostly-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-mostly-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-rtl-text-should-render-with-correct-direction-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-rtl-text-should-render-with-correct-direction-1-snap.png index a37cd7dd63..0b0cfb63c2 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-rtl-text-should-render-with-correct-direction-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-rtl-text-should-render-with-correct-direction-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png index 8633e68f3e..9764b8060f 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-sunburst-chart-type-lang-he-rtl-text-should-render-with-correct-direction-clockwise-sectors-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-ar-ltr-text-should-render-with-correct-direction-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-ar-ltr-text-should-render-with-correct-direction-1-snap.png index 8536d328e0..4e9165958d 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-ar-ltr-text-should-render-with-correct-direction-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-ar-ltr-text-should-render-with-correct-direction-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-ar-mostly-ltr-text-should-render-with-correct-direction-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-ar-mostly-ltr-text-should-render-with-correct-direction-1-snap.png index dc1f4d0e99..75c23620ce 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-ar-mostly-ltr-text-should-render-with-correct-direction-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-ar-mostly-ltr-text-should-render-with-correct-direction-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-ar-mostly-rtl-text-should-render-with-correct-direction-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-ar-mostly-rtl-text-should-render-with-correct-direction-1-snap.png index 1d5e1a25f8..5548a2e5fa 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-ar-mostly-rtl-text-should-render-with-correct-direction-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-ar-mostly-rtl-text-should-render-with-correct-direction-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-ar-rtl-text-should-render-with-correct-direction-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-ar-rtl-text-should-render-with-correct-direction-1-snap.png index f54c016d03..560da3dd5c 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-ar-rtl-text-should-render-with-correct-direction-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-ar-rtl-text-should-render-with-correct-direction-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-he-ltr-text-should-render-with-correct-direction-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-he-ltr-text-should-render-with-correct-direction-1-snap.png index 8536d328e0..4e9165958d 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-he-ltr-text-should-render-with-correct-direction-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-he-ltr-text-should-render-with-correct-direction-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-he-mostly-ltr-text-should-render-with-correct-direction-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-he-mostly-ltr-text-should-render-with-correct-direction-1-snap.png index 42e02e2830..2dcaac8d82 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-he-mostly-ltr-text-should-render-with-correct-direction-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-he-mostly-ltr-text-should-render-with-correct-direction-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-he-mostly-rtl-text-should-render-with-correct-direction-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-he-mostly-rtl-text-should-render-with-correct-direction-1-snap.png index c25e11f9db..c6a2d2bd48 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-he-mostly-rtl-text-should-render-with-correct-direction-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-he-mostly-rtl-text-should-render-with-correct-direction-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-he-rtl-text-should-render-with-correct-direction-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-he-rtl-text-should-render-with-correct-direction-1-snap.png index 1b970a0a83..4f17dcec2a 100644 Binary files a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-he-rtl-text-should-render-with-correct-direction-1-snap.png and b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-rtl-support-treemap-chart-type-lang-he-rtl-text-should-render-with-correct-direction-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/waffle-stories-test-ts-waffle-should-render-cells-in-ascending-order-1-snap.png b/integration/tests/__image_snapshots__/waffle-stories-test-ts-waffle-should-render-cells-in-ascending-order-1-snap.png index beb49af27e..efac3cf3ed 100644 Binary files a/integration/tests/__image_snapshots__/waffle-stories-test-ts-waffle-should-render-cells-in-ascending-order-1-snap.png and b/integration/tests/__image_snapshots__/waffle-stories-test-ts-waffle-should-render-cells-in-ascending-order-1-snap.png differ diff --git a/integration/tests/partition_stories.test.ts b/integration/tests/partition_stories.test.ts index 43463f3651..8cc8eee66f 100644 --- a/integration/tests/partition_stories.test.ts +++ b/integration/tests/partition_stories.test.ts @@ -82,4 +82,10 @@ describe('Axis stories', () => { ); }); }); + + eachTheme.it(async (_, urlParam) => { + await common.expectChartAtUrlToMatchScreenshot( + `http://localhost:9001/?path=/story/sunburst--value-formatted-with-categorical-color-palette&${urlParam}`, + ); + }, 'should render link labels with fallback text color for %s theme'); }); diff --git a/package.json b/package.json index 5e09c472ec..b70b401439 100644 --- a/package.json +++ b/package.json @@ -68,8 +68,8 @@ "@elastic/datemath": "^5.0.3", "@elastic/eui": "^41.3.0", "@mdx-js/loader": "^1.6.6", - "@microsoft/api-documenter": "^7.12.7", - "@microsoft/api-extractor": "^7.18.9", + "@microsoft/api-documenter": "^7.13.54", + "@microsoft/api-extractor": "^7.18.11", "@semantic-release/changelog": "^5.0.1", "@semantic-release/commit-analyzer": "^8.0.1", "@semantic-release/exec": "^5.0.0", diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md index 48f8459d2b..6ce2bb0a78 100644 --- a/packages/charts/api/charts.api.md +++ b/packages/charts/api/charts.api.md @@ -51,10 +51,6 @@ export interface AnimKeyframe { // // (undocumented) easingFunction: EasingFunction; - // Warning: (ae-forgotten-export) The symbol "StaticConfig" needs to be exported by the entry point index.d.ts - // - // (undocumented) - keyframeConfig: Partial; // (undocumented) time: number; } @@ -237,6 +233,7 @@ export interface AxisStyle { // @public export interface BackgroundStyle { color: string; + fallbackColor: Color; } // @public @@ -751,6 +748,9 @@ export const DEFAULT_TOOLTIP_SNAP = true; // @public export const DEFAULT_TOOLTIP_TYPE: "vertical"; +// @public (undocumented) +export function defaultPartitionValueFormatter(d: number): string; + // @public (undocumented) export type DefaultSettingsProps = 'id' | 'chartType' | 'specType' | 'rendering' | 'rotation' | 'resizeDebounce' | 'pointerUpdateDebounce' | 'pointerUpdateTrigger' | 'animateData' | 'debug' | 'tooltip' | 'theme' | 'brushAxis' | 'minBrushDelta' | 'externalPointerEvents' | 'showLegend' | 'showLegendExtra' | 'legendPosition' | 'legendMaxDepth' | 'legendSize' | 'ariaUseDefaultSummary' | 'ariaLabelHeadingLevel' | 'ariaTableCaption' | 'allowBrushingLastHistogramBin'; @@ -1571,7 +1571,7 @@ export interface OrdinalScale { // @public (undocumented) export type OutOfRoomCallback = (wordCount: number, renderedWordCount: number, renderedWords: string[]) => void; -// @public (undocumented) +// @public export type Padding = PerSideDistance; // @public (undocumented) @@ -1589,15 +1589,6 @@ export type PartialTheme = RecursivePartial; // @public (undocumented) export const Partition: React_2.FunctionComponent; -// @public (undocumented) -export interface PartitionConfig extends StaticConfig { - // @alpha (undocumented) - animation: { - duration: TimeMs; - keyframes: Array; - }; -} - // @public (undocumented) export type PartitionElementEvent = [Array, SeriesIdentifier]; @@ -1642,6 +1633,41 @@ export const PartitionLayout: Readonly<{ // @public (undocumented) export type PartitionLayout = $Values; +// Warning: (ae-forgotten-export) The symbol "FillFontSizeRange" needs to be exported by the entry point index.d.ts +// +// @public (undocumented) +export interface PartitionStyle extends FillFontSizeRange { + // Warning: (ae-forgotten-export) The symbol "Distance" needs to be exported by the entry point index.d.ts + // + // (undocumented) + circlePadding: Distance; + // Warning: (ae-forgotten-export) The symbol "SizeRatio" needs to be exported by the entry point index.d.ts + emptySizeRatio: SizeRatio; + // (undocumented) + fillLabel: PartitionFillLabel; + // Warning: (ae-forgotten-export) The symbol "FontFamily" needs to be exported by the entry point index.d.ts + // + // (undocumented) + fontFamily: FontFamily; + // (undocumented) + horizontalTextAngleThreshold: Radian; + // (undocumented) + horizontalTextEnforcer: Ratio; + // Warning: (ae-forgotten-export) The symbol "LinkLabelConfig" needs to be exported by the entry point index.d.ts + // + // (undocumented) + linkLabel: LinkLabelConfig; + outerSizeRatio: SizeRatio; + // (undocumented) + radialPadding: Distance; + // Warning: (ae-forgotten-export) The symbol "StrokeStyle" needs to be exported by the entry point index.d.ts + // + // (undocumented) + sectorLineStroke: StrokeStyle_2; + // (undocumented) + sectorLineWidth: Pixels; +} + // @public (undocumented) export const PATH_KEY = "path"; @@ -1910,8 +1936,6 @@ export type ScaleType = $Values; // @public (undocumented) export interface SectorGeomSpecY { - // Warning: (ae-forgotten-export) The symbol "Distance" needs to be exported by the entry point index.d.ts - // // (undocumented) y0px: Distance; // (undocumented) @@ -2293,14 +2317,13 @@ export interface Theme { colors: ColorConfig; // (undocumented) crosshair: CrosshairStyle; - // (undocumented) goal: GoalStyles; - // (undocumented) heatmap: HeatmapStyle; // (undocumented) legend: LegendStyle; lineSeriesStyle: LineSeriesStyle; markSizeRatio?: number; + partition: PartitionStyle; // (undocumented) scales: ScalesConfig; // (undocumented) @@ -2575,9 +2598,8 @@ export type YDomainRange = YDomainBase & DomainRange & LogScaleOptions; // Warnings were encountered during analysis: // -// src/chart_types/partition_chart/layout/types/config_types.ts:137:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts -// src/utils/themes/theme.ts:216:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts -// src/utils/themes/theme.ts:217:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts +// src/utils/themes/theme.ts:217:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts +// src/utils/themes/theme.ts:218:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts // (No @packageDocumentation comment for this package) diff --git a/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts index 42496fd505..77a8a2abad 100644 --- a/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts +++ b/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts @@ -134,7 +134,7 @@ export function shapeViewModel( if (colorToRgba(background.color)[3] < 1) { Logger.expected( - `Text contrast requires a opaque background color, using white as fallback`, + 'Text contrast requires a opaque background color, using fallbackColor', 'an opaque color', background.color, ); @@ -185,7 +185,7 @@ export function shapeViewModel( visible: !isValueHidden(d.value, bandsToHide), formatted: formattedValue, fontSize, - textColor: fillTextColor(cellBackgroundColor, background.color), + textColor: fillTextColor(background.fallbackColor, cellBackgroundColor, background.color), }; return acc; }, {}); diff --git a/packages/charts/src/chart_types/partition_chart/layout/config.ts b/packages/charts/src/chart_types/partition_chart/layout/config.ts index d35ba571ac..522011ddbf 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/config.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/config.ts @@ -7,16 +7,14 @@ */ import { Colors } from '../../../common/colors'; -import { ConfigItem, configMap, Numeric } from '../../../common/config_objects'; +import { ConfigItem, Numeric } from '../../../common/config_objects'; import { GOLDEN_RATIO, TAU } from '../../../common/constants'; import { FONT_STYLES, FONT_VARIANTS } from '../../../common/text_utils'; import { ColorVariant } from '../../../utils/common'; -import { Config, PartitionLayout } from './types/config_types'; +import { PartitionLayout } from './types/config_types'; import { ShapeTreeNode } from './types/viewmodel_types'; import { AGGREGATE_KEY, STATISTICS_KEY } from './utils/group_by_rollup'; -const LOG_10 = Math.log(10); - function significantDigitCount(d: number): number { let n = Math.abs(parseFloat(String(d).replace('.', ''))); if (n === 0) { @@ -25,7 +23,7 @@ function significantDigitCount(d: number): number { while (n !== 0 && n % 10 === 0) { n /= 10; } - return Math.floor(Math.log(n) / LOG_10) + 1; + return Math.floor(Math.log(n) / Math.LN10) + 1; } /** @internal */ @@ -64,7 +62,8 @@ export const VALUE_GETTERS = Object.freeze({ percent: percentValueGetter, ratio: /** @public */ export type ValueGetterName = keyof typeof VALUE_GETTERS; -function defaultFormatter(d: number): string { +/** @public */ +export function defaultPartitionValueFormatter(d: number): string { return Math.abs(d) >= 10000000 || Math.abs(d) < 0.001 ? d.toExponential(Math.min(2, Math.max(0, significantDigitCount(d) - 1))) : d.toLocaleString(undefined, { @@ -114,7 +113,10 @@ const valueFont = { }, }; -/** @internal */ +/** + * Keeping for future config validation checks + * @internal + */ export const configMetadata: Record = { // shape geometry width: { dflt: 300, min: 0, max: 1024, type: 'number', reconfigurable: false }, @@ -204,7 +206,7 @@ export const configMetadata: Record = { type: 'function', }, valueFormatter: { - dflt: defaultFormatter, + dflt: defaultPartitionValueFormatter, type: 'function', }, valueFont, @@ -303,16 +305,12 @@ export const configMetadata: Record = { }, }, - // other backgroundColor: { dflt: Colors.White.keyword, type: 'color' }, sectorLineWidth: { dflt: 1, min: 0, max: 4, type: 'number' }, sectorLineStroke: { dflt: Colors.White.keyword, type: 'string' }, animation: { type: 'group', values: { duration: { dflt: 0, min: 0, max: 3000, type: 'number' } } }, }; -/** @internal */ -export const config: Config = configMap((item: ConfigItem) => item.dflt, configMetadata); - /** * Part-to-whole visualizations such as treemap, sunburst, pie hinge on an aggregation * function such that the value is independent of the order of how the constituents are aggregated diff --git a/packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts b/packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts index 2f5990d9f6..28812caba1 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts @@ -6,13 +6,9 @@ * Side Public License, v 1. */ -import { $Values as Values } from 'utility-types'; +import { $Values } from 'utility-types'; -import { Color } from '../../../../common/colors'; -import { Distance, Pixels, Radian, Radius, Ratio, SizeRatio, TimeMs } from '../../../../common/geometry'; -import { Font, FontFamily, PartialFont } from '../../../../common/text_utils'; -import { ColorVariant, StrokeStyle, ValueFormatter } from '../../../../utils/common'; -import { PerSideDistance } from '../../../../utils/dimensions'; +import { Ratio, TimeMs } from '../../../../common/geometry'; /** @public */ export const PartitionLayout = Object.freeze({ @@ -25,100 +21,7 @@ export const PartitionLayout = Object.freeze({ }); /** @public */ -export type PartitionLayout = Values; // could use ValuesType - -/** @public */ -export type PerSidePadding = PerSideDistance; - -/** @public */ -export type Padding = Pixels | Partial; - -interface LabelConfig extends Font { - textColor: Color | typeof ColorVariant.Adaptive; - valueFormatter: ValueFormatter; - valueFont: PartialFont; - padding: Padding; -} - -/** @public */ -export interface FillLabelConfig extends LabelConfig { - clipText: boolean; -} - -/** @public */ -export interface LinkLabelConfig extends LabelConfig { - fontSize: Pixels; // todo consider putting it in Font - maximumSection: Distance; // use linked labels below this limit - gap: Pixels; - spacing: Pixels; - minimumStemLength: Distance; - stemAngle: Radian; - horizontalStemLength: Distance; - radiusPadding: Distance; - lineWidth: Pixels; - maxCount: number; - maxTextLength: number; -} - -/** @public */ -export interface FillFontSizeRange { - minFontSize: Pixels; - maxFontSize: Pixels; - idealFontSizeJump: Ratio; - /** - * When `maximizeFontSize` is false (the default), text font will not be larger than font sizes in larger sectors/rectangles in the same pie chart, - * sunburst ring or treemap layer. When it is set to true, the largest font, not exceeding `maxFontSize`, that fits in the slice/sector/rectangle - * will be chosen for easier text readability, irrespective of the value. - */ - maximizeFontSize: boolean; -} - -/** @public */ -export interface RelativeMargins { - left: SizeRatio; - right: SizeRatio; - top: SizeRatio; - bottom: SizeRatio; -} - -// todo switch to `io-ts` style, generic way of combining static and runtime type info -/** @public */ -export interface StaticConfig extends FillFontSizeRange { - // shape geometry - width: number; - height: number; - margin: RelativeMargins; - emptySizeRatio: SizeRatio; - outerSizeRatio: SizeRatio; - clockwiseSectors: boolean; - specialFirstInnermostSector: boolean; - partitionLayout: PartitionLayout; - /** @alpha */ - drilldown: boolean; - - // general text config - fontFamily: FontFamily; - - // fill text layout config - circlePadding: Distance; - radialPadding: Distance; - horizontalTextAngleThreshold: Radian; - horizontalTextEnforcer: Ratio; - maxRowCount: number; - fillOutside: boolean; - radiusOutside: Radius; - fillRectangleWidth: Distance; - fillRectangleHeight: Distance; - fillLabel: FillLabelConfig; - - // linked labels (primarily: single-line) - linkLabel: LinkLabelConfig; - - // global - backgroundColor: Color; - sectorLineWidth: Pixels; - sectorLineStroke: StrokeStyle; -} +export type PartitionLayout = $Values; // could use ValuesType /** @alpha */ export type EasingFunction = (x: Ratio) => Ratio; @@ -127,14 +30,14 @@ export type EasingFunction = (x: Ratio) => Ratio; export interface AnimKeyframe { time: number; easingFunction: EasingFunction; - keyframeConfig: Partial; + // keyframeConfig: Partial; } /** @public */ -export interface Config extends StaticConfig { +export interface AnimationConfig { /** @alpha */ - animation: { + animation?: { duration: TimeMs; - keyframes: Array; + keyframes?: Array; }; } diff --git a/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts b/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts index c87634dcb9..152008f094 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts @@ -21,12 +21,15 @@ import { import { Font, HorizontalAlignment, VerticalAlignments } from '../../../../common/text_utils'; import { GroupByAccessor } from '../../../../specs'; import { LegendPath } from '../../../../state/actions/legend'; +import { Size } from '../../../../utils/dimensions'; +import { LIGHT_THEME } from '../../../../utils/themes/light_theme'; +import { Theme } from '../../../../utils/themes/theme'; import { ContinuousDomainFocus } from '../../renderer/canvas/partition'; import { Layer } from '../../specs'; -import { config, MODEL_KEY, ValueGetterName } from '../config'; +import { MODEL_KEY, ValueGetterName } from '../config'; import { ArrayNode, HierarchyOfArrays } from '../utils/group_by_rollup'; import { LinkLabelsViewModelSpec } from '../viewmodel/link_text_layout'; -import { Config, PartitionLayout } from './config_types'; +import { AnimationConfig, PartitionLayout } from './config_types'; /** @internal */ export type LinkLabelVM = { @@ -105,7 +108,7 @@ export type PickFunction = (x: Pixels, y: Pixels, focus: ContinuousDomainFocus) /** @internal */ export interface PartitionSmallMultiplesModel extends SmallMultiplesDescriptors { smAccessorValue: number | string; - partitionLayout: PartitionLayout; + layout: PartitionLayout; top: SizeRatio; left: SizeRatio; width: SizeRatio; @@ -126,8 +129,9 @@ export interface PartitionSmallMultiplesModel extends SmallMultiplesDescriptors } /** @internal */ -export interface ShapeViewModel extends PartitionSmallMultiplesModel { - config: Config; +export interface ShapeViewModel extends PartitionSmallMultiplesModel, AnimationConfig { + style: Theme['partition']; + chartDimensions: Size; layers: Layer[]; quadViewModel: QuadViewModel[]; rowSets: RowSet[]; @@ -147,7 +151,9 @@ const defaultFont: Font = { }; /** @internal */ -export const nullPartitionSmallMultiplesModel = (partitionLayout: PartitionLayout): PartitionSmallMultiplesModel => ({ +export const nullPartitionSmallMultiplesModel = ( + layout: PartitionLayout = PartitionLayout.sunburst, +): PartitionSmallMultiplesModel => ({ index: 0, innerIndex: 0, smAccessorValue: '', @@ -161,7 +167,7 @@ export const nullPartitionSmallMultiplesModel = (partitionLayout: PartitionLayou innerColumnIndex: 0, marginLeftPx: 0, marginTopPx: 0, - partitionLayout, + layout, panel: { title: '', innerWidth: 0, @@ -178,9 +184,13 @@ export const nullPartitionSmallMultiplesModel = (partitionLayout: PartitionLayou }); /** @internal */ -export const nullShapeViewModel = (specifiedConfig?: Config, diskCenter?: PointObject): ShapeViewModel => ({ - ...nullPartitionSmallMultiplesModel((specifiedConfig || config).partitionLayout), - config: specifiedConfig || config, +export const nullShapeViewModel = ( + layout: PartitionLayout = PartitionLayout.sunburst, + style: Theme['partition'] = LIGHT_THEME.partition, + diskCenter?: PointObject, +): ShapeViewModel => ({ + ...nullPartitionSmallMultiplesModel(layout), + style, layers: [], quadViewModel: [], rowSets: [], @@ -194,6 +204,10 @@ export const nullShapeViewModel = (specifiedConfig?: Config, diskCenter?: PointO diskCenter: diskCenter || { x: 0, y: 0 }, pickQuads: () => [], outerRadius: 0, + chartDimensions: { + width: 0, + height: 0, + }, }); /** @internal */ diff --git a/packages/charts/src/chart_types/partition_chart/layout/utils/circline_geometry.ts b/packages/charts/src/chart_types/partition_chart/layout/utils/circline_geometry.ts index ea2603bd5f..80af3ef18a 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/utils/circline_geometry.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/utils/circline_geometry.ts @@ -19,7 +19,8 @@ import { RingSectorConstruction, trueBearingToStandardPositionAngle, } from '../../../../common/geometry'; -import { Config } from '../types/config_types'; +import { PartitionStyle } from '../../../../utils/themes/partition'; +import { PartitionSpec } from '../../specs'; import { AngleFromTo, LayerFromTo, ShapeTreeNode } from '../types/viewmodel_types'; function euclideanDistance({ x: x1, y: y1 }: PointObject, { x: x2, y: y2 }: PointObject): Distance { @@ -167,16 +168,13 @@ function ringSectorOuterRadius(innerRadius: Radian, ringThickness: Distance) { } /** @internal */ -export function ringSectorConstruction(config: Config, innerRadius: Radius, ringThickness: Distance) { +export function ringSectorConstruction( + { fillOutside, radiusOutside, fillRectangleWidth, fillRectangleHeight }: PartitionSpec, + { circlePadding, radialPadding }: PartitionStyle, + innerRadius: Radius, + ringThickness: Distance, +) { return (ringSector: ShapeTreeNode): RingSectorConstruction => { - const { - circlePadding, - radialPadding, - fillOutside, - radiusOutside, - fillRectangleWidth, - fillRectangleHeight, - } = config; const radiusGetter = fillOutside ? ringSectorOuterRadius : ringSectorInnerRadius; const geometricInnerRadius = radiusGetter(innerRadius, ringThickness)(ringSector); const innerR = geometricInnerRadius + circlePadding * 2; diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.ts index 911800d5cb..618673fde6 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/fill_text_layout.ts @@ -28,9 +28,9 @@ import { VerticalAlignments, } from '../../../../common/text_utils'; import { integerSnap, monotonicHillClimb } from '../../../../solvers/monotonic_hill_climb'; -import { getOppositeAlignment, isRTLString, ValueFormatter } from '../../../../utils/common'; +import { ValueFormatter, getOppositeAlignment, isRTLString } from '../../../../utils/common'; +import { FillLabelConfig, Padding, PartitionStyle } from '../../../../utils/themes/partition'; import { Layer } from '../../specs'; -import { Config, Padding } from '../types/config_types'; import { QuadViewModel, RawTextGetter, @@ -223,17 +223,17 @@ function fill( getRotation: GetRotation, ) { return function fillClosure( - config: Config, + fillLabel: FillLabelConfig, layers: Layer[], measure: TextMeasure, rawTextGetter: RawTextGetter, valueGetter: ValueGetterFunction, formatter: ValueFormatter, + maxRowCount: number, leftAlign: boolean, middleAlign: boolean, ) { const horizontalAlignment = leftAlign ? HorizontalAlignment.left : HorizontalAlignment.center; - const { maxRowCount, fillLabel } = config; return (allFontSizes: Pixels[][], textFillOrigin: PointTuple, node: QuadViewModel): RowSet => { const container = shapeConstructor(node); const rotation = getRotation(node); @@ -481,9 +481,10 @@ export function fillTextLayout( valueGetter: ValueGetterFunction, valueFormatter: ValueFormatter, childNodes: QuadViewModel[], - config: Config, + style: PartitionStyle, layers: Layer[], textFillOrigins: PointTuple[], + maxRowCount: number, leftAlign: boolean, middleAlign: boolean, ): RowSet[] { @@ -491,7 +492,7 @@ export function fillTextLayout( for (let l = 0; l <= layers.length; l++) { // get font size spec from config, which layer.fillLabel properties can override const { minFontSize, maxFontSize, idealFontSizeJump } = { - ...config, + ...style, ...(l < layers.length && layers[l].fillLabel), }; const fontSizeMagnification = maxFontSize / minFontSize; @@ -508,12 +509,13 @@ export function fillTextLayout( } const filler = specificFiller( - config, + style.fillLabel, layers, measure, rawTextGetter, valueGetter, valueFormatter, + maxRowCount, leftAlign, middleAlign, ); diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts index c005e071ca..8b78f600f8 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts @@ -85,16 +85,14 @@ export function partitionTree( data: Datum[], valueAccessor: ValueAccessor, layers: Layer[], - defaultLayout: PartitionLayout, - partitionLayout: PartitionLayout = defaultLayout, + layout: PartitionLayout, innerGroups: LegendPath, ) { return getHierarchyOfArrays( data, valueAccessor, - // eslint-disable-next-line no-shadow [() => HIERARCHY_ROOT_KEY, ...layers.map(({ groupByRollup }) => groupByRollup)], - [null, ...layers.map(sorter(partitionLayout))], + [null, ...layers.map(sorter(layout))], innerGroups, ); } diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts index 40f225b2d1..8f6e20b1e8 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts @@ -7,7 +7,7 @@ */ import { colorToRgba } from '../../../../common/color_library_wrappers'; -import { Color, Colors } from '../../../../common/colors'; +import { Color } from '../../../../common/colors'; import { TAU } from '../../../../common/constants'; import { fillTextColor } from '../../../../common/fill_text_color'; import { @@ -22,7 +22,8 @@ import { cutToLength, fitText, Font, measureOneBoxWidth, TextMeasure } from '../ import { ColorVariant, isRTLString, ValueFormatter } from '../../../../utils/common'; import { Logger } from '../../../../utils/logger'; import { Point } from '../../../../utils/point'; -import { Config, LinkLabelConfig } from '../types/config_types'; +import { LinkLabelConfig, PartitionStyle } from '../../../../utils/themes/partition'; +import { BackgroundStyle } from '../../../../utils/themes/theme'; import { LinkLabelVM, RawTextGetter, ShapeTreeNode, ValueGetterFunction } from '../types/viewmodel_types'; /** @internal */ @@ -30,7 +31,7 @@ export interface LinkLabelsViewModelSpec { linkLabels: LinkLabelVM[]; labelFontSpec: Font; valueFontSpec: Font; - strokeColor?: Color; + strokeColor: Color; } /** @internal */ @@ -38,7 +39,7 @@ export function linkTextLayout( rectWidth: Distance, rectHeight: Distance, measure: TextMeasure, - config: Config, + style: PartitionStyle, nodesWithoutRoom: ShapeTreeNode[], currentY: Distance[], anchorRadius: Distance, @@ -47,9 +48,9 @@ export function linkTextLayout( valueFormatter: ValueFormatter, maxTextLength: number, diskCenter: Point, - containerBgColor: Color = Colors.White.keyword, + { color: backgroundColor, fallbackColor: fallbackBGColor }: BackgroundStyle, ): LinkLabelsViewModelSpec { - const { linkLabel } = config; + const { linkLabel } = style; const maxDepth = nodesWithoutRoom.reduce((p: number, n: ShapeTreeNode) => Math.max(p, n.depth), 0); const yRelativeIncrement = Math.sin(linkLabel.stemAngle) * linkLabel.minimumStemLength; const rowPitch = linkLabel.fontSize + linkLabel.spacing; @@ -78,15 +79,18 @@ export function linkTextLayout( ) .filter(({ text }) => text !== ''); // cull linked labels whose text was truncated to nothing; - if (colorToRgba(containerBgColor)[3] < 1) { + if (colorToRgba(backgroundColor)[3] < 1) { + // Override handled in fill_text_color.ts Logger.expected( - `Text contrast requires a opaque background color, using white as fallback`, + 'Text contrast requires an opaque background color, using fallbackColor', 'an opaque color', - containerBgColor, + backgroundColor, ); } const textColor = - linkLabel.textColor === ColorVariant.Adaptive ? fillTextColor(containerBgColor) : linkLabel.textColor; + linkLabel.textColor === ColorVariant.Adaptive + ? fillTextColor(fallbackBGColor, null, backgroundColor) + : linkLabel.textColor; const labelFontSpec: Font = { ...linkLabel, textColor }; const valueFontSpec: Font = { ...linkLabel, ...linkLabel.valueFont, textColor }; diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts index 995daea7ea..f798c318dd 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts @@ -6,14 +6,11 @@ * Side Public License, v 1. */ -import { Color } from '../../../../common/colors'; import { measureText } from '../../../../common/text_utils'; -import { SmallMultiplesStyle } from '../../../../specs'; -import { mergePartial, RecursivePartial } from '../../../../utils/common'; import { Dimensions } from '../../../../utils/dimensions'; +import { PartitionStyle } from '../../../../utils/themes/partition'; import { Layer, PartitionSpec } from '../../specs'; -import { config as defaultConfig, VALUE_GETTERS } from '../config'; -import { Config } from '../types/config_types'; +import { VALUE_GETTERS } from '../config'; import { nullShapeViewModel, PartitionSmallMultiplesModel, @@ -23,6 +20,7 @@ import { ValueGetter, } from '../types/viewmodel_types'; import { DEPTH_KEY, HierarchyOfArrays } from '../utils/group_by_rollup'; +import { BackgroundStyle } from './../../../../utils/themes/theme'; import { shapeViewModel } from './viewmodel'; function rawTextGetter(layers: Layer[]): RawTextGetter { @@ -39,36 +37,30 @@ export function valueGetterFunction(valueGetter: ValueGetter) { /** @internal */ export function getShapeViewModel( - partitionSpec: PartitionSpec, + spec: PartitionSpec, parentDimensions: Dimensions, tree: HierarchyOfArrays, - containerBackgroundColor: Color, - smallMultiplesStyle: SmallMultiplesStyle, + backgroundStyle: BackgroundStyle, + style: PartitionStyle, panelModel: PartitionSmallMultiplesModel, ): ShapeViewModel { - const { width, height } = parentDimensions; - const { layers, topGroove, config: specConfig } = partitionSpec; const textMeasurer = document.createElement('canvas'); const textMeasurerCtx = textMeasurer.getContext('2d'); - const partialConfig: RecursivePartial = { ...specConfig, width, height }; - const config: Config = mergePartial(defaultConfig, partialConfig); if (!textMeasurerCtx) { - return nullShapeViewModel(config, { x: width / 2, y: height / 2 }); + const { width, height } = parentDimensions; + return nullShapeViewModel(spec.layout, style, { x: width / 2, y: height / 2 }); } - const valueGetter = valueGetterFunction(partitionSpec.valueGetter); + const valueGetter = valueGetterFunction(spec.valueGetter); return shapeViewModel( measureText(textMeasurerCtx), - config, - layers, - rawTextGetter(layers), - partitionSpec.valueFormatter, - partitionSpec.percentFormatter, + spec, + style, + parentDimensions, + rawTextGetter(spec.layers), valueGetter, tree, - topGroove, - containerBackgroundColor, - smallMultiplesStyle, + backgroundStyle, panelModel, ); } diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts index f72c838730..3e29a987d4 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts @@ -7,7 +7,7 @@ */ import { colorToRgba } from '../../../../common/color_library_wrappers'; -import { Color, Colors } from '../../../../common/colors'; +import { Colors } from '../../../../common/colors'; import { TAU } from '../../../../common/constants'; import { fillTextColor } from '../../../../common/fill_text_color'; import { @@ -19,12 +19,15 @@ import { trueBearingToStandardPositionAngle, } from '../../../../common/geometry'; import { Part, TextMeasure } from '../../../../common/text_utils'; -import { GroupByAccessor, SmallMultiplesStyle } from '../../../../specs'; -import { StrokeStyle, ValueFormatter, RecursivePartial, ColorVariant } from '../../../../utils/common'; +import { GroupByAccessor } from '../../../../specs'; +import { StrokeStyle, ColorVariant } from '../../../../utils/common'; +import { Size } from '../../../../utils/dimensions'; import { Logger } from '../../../../utils/logger'; -import { Layer } from '../../specs'; -import { config as defaultConfig, MODEL_KEY, percentValueGetter } from '../config'; -import { Config, FillLabelConfig, PartitionLayout } from '../types/config_types'; +import { FillLabelConfig, PartitionStyle } from '../../../../utils/themes/partition'; +import { BackgroundStyle } from '../../../../utils/themes/theme'; +import { Layer, PartitionSpec } from '../../specs'; +import { MODEL_KEY, percentValueGetter } from '../config'; +import { PartitionLayout } from '../types/config_types'; import { nullShapeViewModel, OutsideLinksViewModel, @@ -84,8 +87,8 @@ export const isWaffle = (p: PartitionLayout | undefined) => p === PartitionLayou export const isLinear = (p: PartitionLayout | undefined) => isFlame(p) || isIcicle(p); /** @internal */ -export const isSimpleLinear = (config: RecursivePartial, layers: Layer[]) => - isLinear(config.partitionLayout) && layers.every((l) => l.fillLabel?.clipText ?? config.fillLabel?.clipText); +export const isSimpleLinear = (layout: PartitionLayout, fillLabel: FillLabelConfig, layers: Layer[]) => + isLinear(layout) && layers.every((l) => l.fillLabel?.clipText ?? fillLabel?.clipText); function grooveAccessor(n: ArrayEntry) { return entryValue(n).depth > 1 ? 1 : [0, 2][entryValue(n).depth]; @@ -139,14 +142,14 @@ export function makeQuadViewModel( index: number, innerIndex: number, fillLabel: FillLabelConfig, - isSunburstLayout: boolean, - containerBackgroundColor?: Color, + { color: backgroundColor, fallbackColor: fallbackBGColor }: BackgroundStyle, ): Array { - if (colorToRgba(containerBackgroundColor ?? Colors.White.keyword)[3] < 1) { + if (colorToRgba(backgroundColor)[3] < 1) { + // Override handled in fill_text_color.ts Logger.expected( - `Text contrast requires a opaque background color, using white as fallback`, + 'Text contrast requires an opaque background color, using fallbackColor', 'an opaque color', - containerBackgroundColor, + backgroundColor, ); } return childNodes.map((node) => { @@ -156,11 +159,10 @@ export function makeQuadViewModel( const strokeWidth = sectorLineWidth; const strokeStyle = sectorLineStroke; const textNegligible = node.y1px - node.y0px < minRectHeightForText; - const textColor = textNegligible ? Colors.Transparent.keyword : fillLabel.textColor === ColorVariant.Adaptive - ? fillTextColor(fillColor, containerBackgroundColor) + ? fillTextColor(fallbackBGColor, fillColor, backgroundColor) : fillLabel.textColor; return { index, innerIndex, smAccessorValue, strokeWidth, strokeStyle, fillColor, textColor, ...node }; @@ -287,43 +289,47 @@ const rawChildNodes = ( /** @internal */ export function shapeViewModel( textMeasure: TextMeasure, - config: Config, - layers: Layer[], + spec: PartitionSpec, + style: PartitionStyle, + chartDimensions: Size, rawTextGetter: RawTextGetter, - specifiedValueFormatter: ValueFormatter, - specifiedPercentFormatter: ValueFormatter, valueGetter: ValueGetterFunction, tree: HierarchyOfArrays, - topGroove: Pixels, - containerBackgroundColor: Color, - smallMultiplesStyle: SmallMultiplesStyle, + backgroundStyle: BackgroundStyle, panelModel: PartitionSmallMultiplesModel, ): ShapeViewModel { const { - width, - height, - emptySizeRatio, - outerSizeRatio, + layout, + layers, + topGroove, + valueFormatter: specifiedValueFormatter, + percentFormatter: specifiedPercentFormatter, fillOutside, - linkLabel, clockwiseSectors, + maxRowCount, specialFirstInnermostSector, + } = spec; + const { + emptySizeRatio, + outerSizeRatio, + linkLabel, minFontSize, - partitionLayout, sectorLineWidth, - } = config; - + sectorLineStroke, + fillLabel, + } = style; + const { width, height } = chartDimensions; const { marginLeftPx, marginTopPx, panel } = panelModel; - const treemapLayout = isTreemap(partitionLayout); - const mosaicLayout = isMosaic(partitionLayout); - const sunburstLayout = isSunburst(partitionLayout); - const icicleLayout = isIcicle(partitionLayout); - const flameLayout = isFlame(partitionLayout); - const simpleLinear = isSimpleLinear(config, layers); - const waffleLayout = isWaffle(partitionLayout); + const treemapLayout = isTreemap(layout); + const mosaicLayout = isMosaic(layout); + const sunburstLayout = isSunburst(layout); + const icicleLayout = isIcicle(layout); + const flameLayout = isFlame(layout); + const simpleLinear = isSimpleLinear(layout, fillLabel, layers); + const waffleLayout = isWaffle(layout); - const diskCenter = isSunburst(partitionLayout) + const diskCenter = isSunburst(layout) ? { x: marginLeftPx + panel.innerWidth / 2, y: marginTopPx + panel.innerHeight / 2, @@ -335,14 +341,14 @@ export function shapeViewModel( // don't render anything if the total, the width or height is not positive if (!(width > 0) || !(height > 0) || tree.length === 0) { - return nullShapeViewModel(config, diskCenter); + return nullShapeViewModel(layout, style, diskCenter); } const longestPath = ([, { children, path }]: ArrayEntry): number => children.length > 0 ? children.reduce((p, n) => Math.max(p, longestPath(n)), 0) : path.length; const maxDepth = longestPath(tree[0]) - 2; // don't include the root node const childNodes = rawChildNodes( - partitionLayout, + layout, tree, topGroove, panel.innerWidth, @@ -371,14 +377,13 @@ export function shapeViewModel( const quadViewModel = makeQuadViewModel( shownChildNodes.slice(1).map(partToShapeFn), layers, - config.sectorLineWidth, - config.sectorLineStroke, + sectorLineWidth, + sectorLineStroke, panelModel.smAccessorValue, panelModel.index, panelModel.innerIndex, - config.fillLabel, - sunburstLayout, - containerBackgroundColor, + fillLabel, + backgroundStyle, ); // fill text @@ -398,9 +403,9 @@ export function shapeViewModel( const getRowSets = sunburstLayout ? fillTextLayout( - ringSectorConstruction(config, innerRadius, ringThickness), + ringSectorConstruction(spec, style, innerRadius, ringThickness), getSectorRowGeometry, - inSectorRotation(config.horizontalTextEnforcer, config.horizontalTextAngleThreshold), + inSectorRotation(style.horizontalTextEnforcer, style.horizontalTextAngleThreshold), ) : simpleLinear || waffleLayout ? () => [] // no multirow layout needed for simpleLinear partitions; no text at all for waffles @@ -416,9 +421,10 @@ export function shapeViewModel( valueGetter, valueFormatter, nodesWithRoom, - config, + style, layers, textFillOrigins, + maxRowCount, !sunburstLayout, !(treemapLayout || mosaicLayout), ); @@ -438,12 +444,12 @@ export function shapeViewModel( // successful text render if found, and has some row(s) return !(foundInFillText && foundInFillText.rows.length > 0); }); - const maxLinkedLabelTextLength = config.linkLabel.maxTextLength; + const maxLinkedLabelTextLength = style.linkLabel.maxTextLength; const linkLabelViewModels = linkTextLayout( panel.innerWidth, panel.innerHeight, textMeasure, - config, + style, nodesWithoutRoom, currentY, outerRadius, @@ -455,7 +461,7 @@ export function shapeViewModel( x: width * panelModel.left + panel.innerWidth / 2, y: height * panelModel.top + panel.innerHeight / 2, }, - containerBackgroundColor, + backgroundStyle, ); const pickQuads: PickFunction = sunburstLayout @@ -477,9 +483,8 @@ export function shapeViewModel( // combined viewModel return { - partitionLayout: config?.partitionLayout ?? defaultConfig.partitionLayout, + layout, smAccessorValue: panelModel.smAccessorValue, - index: panelModel.index, innerIndex: panelModel.innerIndex, width: panelModel.width, @@ -495,8 +500,7 @@ export function shapeViewModel( panel: { ...panelModel.panel, }, - - config, + style, layers, diskCenter, quadViewModel, @@ -505,6 +509,7 @@ export function shapeViewModel( outsideLinksViewModel, pickQuads, outerRadius, + chartDimensions, }; } diff --git a/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts b/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts index 7252dffdc4..596e023332 100644 --- a/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts +++ b/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts @@ -20,12 +20,14 @@ export function renderLinearPartitionCanvas2d( ctx: CanvasRenderingContext2D, dpr: number, { - config: { sectorLineWidth: padding, width: containerWidth, height: containerHeight, animation }, + style: { sectorLineWidth: padding }, quadViewModel, diskCenter, width: panelWidth, height: panelHeight, layers, + chartDimensions: { width: containerWidth, height: containerHeight }, + animation, }: ShapeViewModel, { currentFocusX0, currentFocusX1, prevFocusX0, prevFocusX1 }: ContinuousDomainFocus, animationState: AnimationState, @@ -52,7 +54,7 @@ export function renderLinearPartitionCanvas2d( function render( logicalTime: number, - timeFunction: (time: number) => number = animation.duration + timeFunction: (time: number) => number = animation?.duration ? easeInOut(Math.min(5, animation.duration / 100)) : linear, ) { diff --git a/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts b/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts index 23c3ce29c9..6b905472c2 100644 --- a/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts +++ b/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts @@ -263,9 +263,10 @@ export function renderPartitionCanvas2d( ctx: CanvasRenderingContext2D, dpr: number, { + layout, width, height, - config, + style, quadViewModel, rowSets, outsideLinksViewModel, @@ -273,11 +274,12 @@ export function renderPartitionCanvas2d( diskCenter, outerRadius, panel, + chartDimensions, }: ShapeViewModel, ) { - const { sectorLineWidth, sectorLineStroke, linkLabel } = config; + const { sectorLineWidth, sectorLineStroke, linkLabel } = style; - const linkLineColor = RGBATupleToString(colorToRgba(linkLabel.textColor)); + const linkLineColor = linkLabelViewModels.strokeColor; withContext(ctx, () => { // set some defaults for the overall rendering @@ -299,10 +301,10 @@ export function renderPartitionCanvas2d( const innerPad = midlineOffset * panel.fontSize; // todo replace it with theme.axisPanelTitle.padding.inner ctx.fillText( panel.title, - isSunburst(config.partitionLayout) ? diskCenter.x : diskCenter.x + (config.width * width) / 2, - isSunburst(config.partitionLayout) - ? config.linkLabel.maxCount > 0 - ? diskCenter.y - (config.height * height) / 2 + panel.fontSize + isSunburst(layout) ? diskCenter.x : diskCenter.x + (chartDimensions.width * width) / 2, + isSunburst(layout) + ? style.linkLabel.maxCount > 0 + ? diskCenter.y - (chartDimensions.height * height) / 2 + panel.fontSize : diskCenter.y - outerRadius - innerPad : diskCenter.y + 12, ); @@ -325,8 +327,7 @@ export function renderPartitionCanvas2d( // The layers are callbacks, because of the need to not bake in the `ctx`, it feels more composable and uncoupled this way. renderLayers(ctx, [ // bottom layer: sectors (pie slices, ring sectors etc.) - () => - isSunburst(config.partitionLayout) ? renderSectors(ctx, quadViewModel) : renderRectangles(ctx, quadViewModel), + () => (isSunburst(layout) ? renderSectors(ctx, quadViewModel) : renderRectangles(ctx, quadViewModel)), // all the fill-based, potentially multirow text, whether inside or outside the sector () => renderRowSets(ctx, rowSets, linkLineColor), diff --git a/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_wrapped_renderers.ts b/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_wrapped_renderers.ts index 22d021b6fe..6553135c2c 100644 --- a/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_wrapped_renderers.ts +++ b/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_wrapped_renderers.ts @@ -15,11 +15,12 @@ export function renderWrappedPartitionCanvas2d( ctx: CanvasRenderingContext2D, dpr: number, { - config: { sectorLineWidth: padding, width: containerWidth, height: containerHeight }, + style: { sectorLineWidth: padding }, quadViewModel, diskCenter, width: panelWidth, height: panelHeight, + chartDimensions: { width: containerWidth, height: containerHeight }, }: ShapeViewModel, ) { const width = containerWidth * panelWidth; diff --git a/packages/charts/src/chart_types/partition_chart/renderer/canvas/partition.tsx b/packages/charts/src/chart_types/partition_chart/renderer/canvas/partition.tsx index 0396679b4f..8f87c1e7de 100644 --- a/packages/charts/src/chart_types/partition_chart/renderer/canvas/partition.tsx +++ b/packages/charts/src/chart_types/partition_chart/renderer/canvas/partition.tsx @@ -58,7 +58,7 @@ interface ReactiveChartStateProps { geometries: ShapeViewModel; geometriesFoci: ContinuousDomainFocus[]; multiGeometries: ShapeViewModel[]; - chartContainerDimensions: Dimensions; + chartDimensions: Dimensions; a11ySettings: A11ySettings; debug: SettingsSpec['debug']; background: Color; @@ -119,7 +119,7 @@ class PartitionComponent extends React.Component { handleMouseMove(e: MouseEvent) { const { initialized, - chartContainerDimensions: { width, height }, + chartDimensions: { width, height }, forwardStageRef, } = this.props; if (!forwardStageRef.current || !this.ctx || !initialized || width === 0 || height === 0) { @@ -149,7 +149,7 @@ class PartitionComponent extends React.Component { const { forwardStageRef, initialized, - chartContainerDimensions: { width, height }, + chartDimensions: { width, height }, a11ySettings, debug, isRTL, @@ -183,9 +183,9 @@ class PartitionComponent extends React.Component { const { ctx, devicePixelRatio, props } = this; clearCanvas(ctx, props.background); props.multiGeometries.forEach((geometries, geometryIndex) => { - const renderer = isSimpleLinear(geometries.config, geometries.layers) + const renderer = isSimpleLinear(geometries.layout, geometries.style.fillLabel, geometries.layers) ? renderLinearPartitionCanvas2d - : isWaffle(geometries.config.partitionLayout) + : isWaffle(geometries.layout) ? renderWrappedPartitionCanvas2d : renderPartitionCanvas2d; renderer(ctx, devicePixelRatio, geometries, props.geometriesFoci[geometryIndex], this.animationState); @@ -208,7 +208,7 @@ const DEFAULT_PROPS: ReactiveChartStateProps = { geometries: nullShapeViewModel(), geometriesFoci: [], multiGeometries: [], - chartContainerDimensions: { + chartDimensions: { width: 0, height: 0, left: 0, @@ -230,7 +230,7 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => { initialized: true, geometries: multiGeometries.length > 0 ? multiGeometries[0] : nullShapeViewModel(), multiGeometries, - chartContainerDimensions: getChartContainerDimensionsSelector(state), + chartDimensions: getChartContainerDimensionsSelector(state), geometriesFoci: partitionDrilldownFocus(state), a11ySettings: getA11ySettingsSelector(state), debug: getSettingsSpecSelector(state).debug, diff --git a/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx b/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx index a807df400b..ddbd9005d1 100644 --- a/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx +++ b/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx @@ -12,7 +12,6 @@ import { Colors } from '../../../../common/colors'; import { TAU } from '../../../../common/constants'; import { PointObject } from '../../../../common/geometry'; import { Dimensions } from '../../../../utils/dimensions'; -import { configMetadata } from '../../layout/config'; import { PartitionLayout } from '../../layout/types/config_types'; import { nullPartitionSmallMultiplesModel, @@ -28,7 +27,7 @@ interface HighlightSet extends PartitionSmallMultiplesModel { geometriesFoci: ContinuousDomainFocus[]; diskCenter: PointObject; outerRadius: number; - partitionLayout: PartitionLayout; + layout: PartitionLayout; } /** @internal */ @@ -174,7 +173,7 @@ export class HighlighterComponent extends React.Component { diskCenter, index, innerIndex, - partitionLayout, + layout, marginLeftPx, marginTopPx, panel: { innerWidth, innerHeight }, @@ -182,13 +181,7 @@ export class HighlighterComponent extends React.Component { - {renderGeometries( - geometries, - partitionLayout, - { color: Colors.Black.keyword }, - geometriesFoci, - width, - )} + {renderGeometries(geometries, layout, { color: Colors.Black.keyword }, geometriesFoci, width)} ), @@ -200,12 +193,12 @@ export class HighlighterComponent extends React.Component { outerRadius, index, innerIndex, - partitionLayout, + layout, marginLeftPx, marginTopPx, panel: { innerWidth, innerHeight }, }) => - isSunburst(partitionLayout) ? ( + isSunburst(layout) ? ( { } = this.props; return this.props.highlightSets .filter(({ geometries }) => geometries.length > 0) - .map(({ index, innerIndex, partitionLayout, geometries, diskCenter, geometriesFoci }) => ( + .map(({ index, innerIndex, layout, geometries, diskCenter, geometriesFoci }) => ( {renderGeometries( geometries, - partitionLayout, + layout, { fillClassName: 'echHighlighterOverlay__fill', strokeClassName: 'echHighlighterOverlay__stroke', @@ -274,7 +267,7 @@ export const DEFAULT_PROPS: HighlighterProps = { }, highlightSets: [ { - ...nullPartitionSmallMultiplesModel(configMetadata.partitionLayout.dflt), + ...nullPartitionSmallMultiplesModel(), geometries: [], geometriesFoci: [], diskCenter: { diff --git a/packages/charts/src/chart_types/partition_chart/specs/index.ts b/packages/charts/src/chart_types/partition_chart/specs/index.ts index 83a351fed1..6277c0fbbf 100644 --- a/packages/charts/src/chart_types/partition_chart/specs/index.ts +++ b/packages/charts/src/chart_types/partition_chart/specs/index.ts @@ -9,25 +9,21 @@ import React from 'react'; import { ChartType } from '../..'; -import { Pixels } from '../../../common/geometry'; +import { Distance, Pixels, Radius } from '../../../common/geometry'; import { Spec } from '../../../specs'; import { SpecType } from '../../../specs/constants'; // kept as unshortened import on separate line otherwise import circularity emerges import { getConnect, specComponentFactory } from '../../../state/spec_factory'; import { IndexedAccessorFn } from '../../../utils/accessor'; -import { - Datum, - LabelAccessor, - RecursivePartial, - ShowAccessor, - ValueAccessor, - ValueFormatter, -} from '../../../utils/common'; -import { config, percentFormatter } from '../layout/config'; -import { Config, FillFontSizeRange, FillLabelConfig } from '../layout/types/config_types'; +import { Datum, LabelAccessor, ShowAccessor, ValueAccessor, ValueFormatter } from '../../../utils/common'; +import { FillFontSizeRange, FillLabelConfig } from '../../../utils/themes/partition'; +import { percentFormatter } from '../layout/config'; +import { AnimationConfig, PartitionLayout } from '../layout/types/config_types'; import { NodeColorAccessor, ShapeTreeNode, ValueGetter } from '../layout/types/viewmodel_types'; import { AGGREGATE_KEY, NodeSorter, PrimitiveValue } from '../layout/utils/group_by_rollup'; -interface ExtendedFillLabelConfig extends FillLabelConfig, FillFontSizeRange {} +interface ExtendedFillLabelConfig extends FillLabelConfig, FillFontSizeRange { + valueFormatter: ValueFormatter; +} /** * Specification for a given layer in the partition chart @@ -42,10 +38,13 @@ export interface Layer { shape?: { fillColor: string | NodeColorAccessor }; } +/** + * @todo: we really need these typed, but since `specComponentFactory` has the typing + * for optional and required props built-in, this is not currently possible. + */ const defaultProps = { chartType: ChartType.Partition, specType: SpecType.Series, - config, valueAccessor: (d: Datum) => (typeof d === 'number' ? d : 0), valueGetter: (n: ShapeTreeNode): number => n[AGGREGATE_KEY], valueFormatter: (d: number): string => String(d), @@ -60,16 +59,24 @@ const defaultProps = { fillLabel: {}, }, ], + clockwiseSectors: true, + specialFirstInnermostSector: true, + layout: PartitionLayout.sunburst, + drilldown: false, + maxRowCount: 12, + fillOutside: false, + radiusOutside: 128, + fillRectangleWidth: Infinity, + fillRectangleHeight: Infinity, }; /** * Specifies the partition chart * @public */ -export interface PartitionSpec extends Spec { +export interface PartitionSpec extends Spec, AnimationConfig { specType: typeof SpecType.Series; chartType: typeof ChartType.Partition; - config: RecursivePartial; data: Datum[]; valueAccessor: ValueAccessor; valueFormatter: ValueFormatter; @@ -78,6 +85,24 @@ export interface PartitionSpec extends Spec { topGroove: Pixels; smallMultiples: string | null; layers: Layer[]; + /** + * Largest to smallest sectors are positioned in a clockwise order + */ + clockwiseSectors: boolean; + /** + * Starts placement with the second largest slice, for the innermost pie/ring + */ + specialFirstInnermostSector: boolean; + layout: PartitionLayout; + maxRowCount: number; + /** @alpha */ + drilldown: boolean; + + // These need examples or documentation + fillOutside: boolean; + radiusOutside: Radius; + fillRectangleWidth: Distance; + fillRectangleHeight: Distance; } type SpecRequiredProps = Pick; @@ -90,10 +115,18 @@ export const Partition: React.FunctionComponent(defaultProps), ); diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/compute_legend.ts b/packages/charts/src/chart_types/partition_chart/state/selectors/compute_legend.ts index 11c921363a..7689492908 100644 --- a/packages/charts/src/chart_types/partition_chart/state/selectors/compute_legend.ts +++ b/packages/charts/src/chart_types/partition_chart/state/selectors/compute_legend.ts @@ -26,7 +26,7 @@ export const computeLegendSelector = createCustomCachedSelector( legendMaxDepth, legendPosition, quadViewModel, - partitionSpec.config.partitionLayout, + partitionSpec.layout, ); }), ); diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/drilldown_active.ts b/packages/charts/src/chart_types/partition_chart/state/selectors/drilldown_active.ts index 8340b7d23d..81dad934fd 100644 --- a/packages/charts/src/chart_types/partition_chart/state/selectors/drilldown_active.ts +++ b/packages/charts/src/chart_types/partition_chart/state/selectors/drilldown_active.ts @@ -7,10 +7,14 @@ */ import { createCustomCachedSelector } from '../../../../state/create_selector'; +import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme'; import { isSimpleLinear } from '../../layout/viewmodel/viewmodel'; import { getPartitionSpecs } from './partition_spec'; /** @internal */ -export const drilldownActive = createCustomCachedSelector([getPartitionSpecs], (specs) => { - return specs.length === 1 && isSimpleLinear(specs[0].config, specs[0].layers); // singleton! -}); +export const drilldownActive = createCustomCachedSelector( + [getPartitionSpecs, getChartThemeSelector], + (specs, { partition }) => { + return specs.length === 1 && isSimpleLinear(specs[0].layout, partition.fillLabel, specs[0].layers); // singleton! + }, +); diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/geometries.ts b/packages/charts/src/chart_types/partition_chart/state/selectors/geometries.ts index 22a083f68d..bd7ca5c9c9 100644 --- a/packages/charts/src/chart_types/partition_chart/state/selectors/geometries.ts +++ b/packages/charts/src/chart_types/partition_chart/state/selectors/geometries.ts @@ -8,7 +8,7 @@ import { ChartType } from '../../..'; import { CategoryKey } from '../../../../common/category'; -import { Pixels, Ratio } from '../../../../common/geometry'; +import { Pixels } from '../../../../common/geometry'; import { Font } from '../../../../common/text_utils'; import { RelativeBandsPadding, SmallMultiplesSpec, SpecType } from '../../../../specs'; import { createCustomCachedSelector } from '../../../../state/create_selector'; @@ -17,7 +17,6 @@ import { getChartThemeSelector } from '../../../../state/selectors/get_chart_the import { getSpecs } from '../../../../state/selectors/get_settings_specs'; import { getSpecsFromStore } from '../../../../state/utils'; import { Dimensions } from '../../../../utils/dimensions'; -import { config } from '../../layout/config'; import { nullShapeViewModel, QuadViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types'; import { getShapeViewModel } from '../../layout/viewmodel/scenegraph'; import { IndexedContinuousDomainFocus } from '../../renderer/canvas/partition'; @@ -27,10 +26,6 @@ import { getTrees, StyledTree } from './tree'; const horizontalSplit = (s?: SmallMultiplesSpec) => s?.splitHorizontally; const verticalSplit = (s?: SmallMultiplesSpec) => s?.splitVertically; -function getInterMarginSize(size: Pixels, startMargin: Ratio, endMargin: Ratio) { - return size * (1 - Math.min(1, startMargin + endMargin)); -} - function bandwidth(range: Pixels, bandCount: number, { outer, inner }: RelativeBandsPadding) { // same convention as d3.scaleBand https://observablehq.com/@d3/d3-scaleband return range / (2 * outer + bandCount + bandCount * inner - inner); @@ -39,8 +34,17 @@ function bandwidth(range: Pixels, bandCount: number, { outer, inner }: RelativeB /** @internal */ export const partitionMultiGeometries = createCustomCachedSelector( [getSpecs, getPartitionSpecs, getChartContainerDimensionsSelector, getTrees, getChartThemeSelector], - (specs, partitionSpecs, parentDimensions, trees, { background, axes: { axisPanelTitle } }): ShapeViewModel[] => { + ( + specs, + partitionSpecs, + parentDimensions, + trees, + { background, axes: { axisPanelTitle }, chartMargins, chartPaddings, partition: partitionStyle }, + ): ShapeViewModel[] => { const smallMultiplesSpecs = getSpecsFromStore(specs, ChartType.Global, SpecType.SmallMultiples); + const { width, height } = parentDimensions; + const chartWidth = width - chartMargins.left - chartMargins.right; + const chartHeight = height - chartMargins.top - chartMargins.bottom; // todo make it part of configuration const outerSpecDirection = ['horizontal', 'vertical', 'zigzag'][0]; @@ -51,8 +55,6 @@ export const partitionMultiGeometries = createCustomCachedSelector( ? 'vertical' : 'zigzag'; - const { width: marginedWidth, height: marginedHeight } = parentDimensions; - const outerPanelCount = partitionSpecs.length; const zigzagColumnCount = Math.ceil(Math.sqrt(outerPanelCount)); const zigzagRowCount = Math.ceil(outerPanelCount / zigzagColumnCount); @@ -71,17 +73,13 @@ export const partitionMultiGeometries = createCustomCachedSelector( : 1; const result = partitionSpecs.flatMap((spec, index) => { - const marginLeft = spec.config.margin?.left ?? config.margin.left; - const marginRight = spec.config.margin?.right ?? config.margin.right; - const chartWidth = getInterMarginSize(marginedWidth, marginLeft, marginRight); - const marginTop = spec.config.margin?.top ?? config.margin.top; - const marginBottom = spec.config.margin?.bottom ?? config.margin.bottom; + const innerWidth = chartWidth - chartPaddings.left - chartPaddings.right; + const innerHeight = chartHeight - chartPaddings.top - chartPaddings.bottom; - const chartHeight = getInterMarginSize(marginedHeight, marginTop, marginBottom); return trees.map(({ name, smAccessorValue, style, tree: t }: StyledTree, innerIndex, a) => { const innerPanelCount = a.length; - const outerPanelWidth = chartWidth * outerWidthRatio; - const outerPanelHeight = chartHeight * outerHeightRatio; + const outerPanelWidth = innerWidth * outerWidthRatio; + const outerPanelHeight = innerHeight * outerHeightRatio; const outerPanelArea = outerPanelWidth * outerPanelHeight; const innerPanelTargetArea = outerPanelArea / innerPanelCount; const innerPanelTargetHeight = Math.sqrt(innerPanelTargetArea); // attempting squarish inner panels @@ -154,21 +152,18 @@ export const partitionMultiGeometries = createCustomCachedSelector( ? 1 / innerZigzagColumnCount : 1); - const { width, height } = parentDimensions; - - const innerWidth = getInterMarginSize(width, marginLeft, marginRight); - const innerHeight = getInterMarginSize(height, marginTop, marginBottom); - const panelInnerWidth = bandwidth(innerWidth, innerColumnCount, style.horizontalPanelPadding); const panelInnerHeight = bandwidth(innerHeight, innerRowCount, style.verticalPanelPadding); const marginLeftPx = - width * marginLeft + + chartMargins.left + + chartPaddings.left + panelInnerWidth * style.horizontalPanelPadding.outer + innerColumnIndex * (panelInnerWidth * (1 + style.horizontalPanelPadding.inner)); const marginTopPx = - height * marginTop + + chartMargins.top + + chartPaddings.top + panelInnerHeight * style.verticalPanelPadding.outer + innerRowIndex * (panelInnerHeight * (1 + style.verticalPanelPadding.inner)); @@ -179,11 +174,10 @@ export const partitionMultiGeometries = createCustomCachedSelector( fontVariant: 'normal', textColor: axisPanelTitle.fill, }; - return getShapeViewModel(spec, parentDimensions, t, background.color, style, { + return getShapeViewModel(spec, parentDimensions, t, background, partitionStyle, { index, innerIndex, - partitionLayout: spec.config.partitionLayout ?? config.partitionLayout, - + layout: spec.layout, smAccessorValue, top: topOuterRatio + topInnerRatio, height: panelHeightRatio, @@ -206,7 +200,9 @@ export const partitionMultiGeometries = createCustomCachedSelector( }); }); - return result.length === 0 ? [nullShapeViewModel(config, { x: outerWidthRatio, y: outerHeightRatio })] : result; + return result.length === 0 + ? [nullShapeViewModel(undefined, undefined, { x: outerWidthRatio, y: outerHeightRatio })] + : result; }, ); diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/get_chart_type_description.ts b/packages/charts/src/chart_types/partition_chart/state/selectors/get_chart_type_description.ts index 8deca6eab6..6d3c0a348f 100644 --- a/packages/charts/src/chart_types/partition_chart/state/selectors/get_chart_type_description.ts +++ b/packages/charts/src/chart_types/partition_chart/state/selectors/get_chart_type_description.ts @@ -13,6 +13,6 @@ import { getPartitionSpec } from './partition_spec'; export const getChartTypeDescriptionSelector = createCustomCachedSelector( [getPartitionSpec], (partitionSpec): string => { - return `${partitionSpec?.config.partitionLayout} chart` ?? 'Partition chart'; + return `${partitionSpec?.layout} chart` ?? 'Partition chart'; }, ); diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/get_debug_state.ts b/packages/charts/src/chart_types/partition_chart/state/selectors/get_debug_state.ts index bbd9a38d6a..c5b909325d 100644 --- a/packages/charts/src/chart_types/partition_chart/state/selectors/get_debug_state.ts +++ b/packages/charts/src/chart_types/partition_chart/state/selectors/get_debug_state.ts @@ -19,7 +19,7 @@ export const getDebugStateSelector = createCustomCachedSelector( [partitionMultiGeometries], (geoms): DebugState => { return { - partition: geoms.reduce((acc, { panel, config, quadViewModel, diskCenter }) => { + partition: geoms.reduce((acc, { layout, panel, quadViewModel, diskCenter }) => { const partitions: PartitionDebugState['partitions'] = quadViewModel.map((model) => { const { dataName, depth, fillColor, value } = model; return { @@ -27,7 +27,7 @@ export const getDebugStateSelector = createCustomCachedSelector( depth, color: fillColor, value, - coords: isSunburst(config.partitionLayout) + coords: isSunburst(layout) ? getCoordsForSector(model, diskCenter) : getCoordsForRectangle(model, diskCenter), }; diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/tree.ts b/packages/charts/src/chart_types/partition_chart/state/selectors/tree.ts index 77e8af95d5..19350edfba 100644 --- a/packages/charts/src/chart_types/partition_chart/state/selectors/tree.ts +++ b/packages/charts/src/chart_types/partition_chart/state/selectors/tree.ts @@ -21,7 +21,6 @@ import { getSpecs } from '../../../../state/selectors/get_settings_specs'; import { getSmallMultiplesSpecs } from '../../../../state/selectors/get_small_multiples_spec'; import { getSpecsFromStore } from '../../../../state/utils'; import { Datum } from '../../../../utils/common'; -import { configMetadata } from '../../layout/config'; import { HierarchyOfArrays, NULL_SMALL_MULTIPLES_KEY } from '../../layout/utils/group_by_rollup'; import { partitionTree } from '../../layout/viewmodel/hierarchy_of_arrays'; import { PartitionSpec } from '../../specs'; @@ -44,7 +43,7 @@ function getTreesForSpec( smSpecs: SmallMultiplesSpec[], groupBySpecs: GroupBySpec[], ): StyledTree[] { - const { data, valueAccessor, layers, config, smallMultiples: smId } = spec; + const { layout, data, valueAccessor, layers, smallMultiples: smId } = spec; const smSpec = smSpecs.find((s) => s.id === smId); const smStyle: SmallMultiplesStyle = { horizontalPanelPadding: smSpec @@ -73,9 +72,7 @@ function getTreesForSpec( name: format(groupKey), smAccessorValue: groupKey, style: smStyle, - tree: partitionTree(subData, valueAccessor, layers, configMetadata.partitionLayout.dflt, config.partitionLayout, [ - { index: innerIndex, value: String(groupKey) }, - ]), + tree: partitionTree(subData, valueAccessor, layers, layout, [{ index: innerIndex, value: String(groupKey) }]), })); } else { return [ @@ -83,7 +80,7 @@ function getTreesForSpec( name: '', smAccessorValue: '', style: smStyle, - tree: partitionTree(data, valueAccessor, layers, configMetadata.partitionLayout.dflt, config.partitionLayout, [ + tree: partitionTree(data, valueAccessor, layers, layout, [ { index: 0, value: NULL_SMALL_MULTIPLES_KEY, diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/renderers.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/renderers.ts index 0d9834624a..381b75006f 100644 --- a/packages/charts/src/chart_types/xy_chart/renderer/canvas/renderers.ts +++ b/packages/charts/src/chart_types/xy_chart/renderer/canvas/renderers.ts @@ -38,7 +38,7 @@ export function renderXYChartCanvas2d( rotation, geometries, geometriesIndex, - theme: { axes: sharedAxesStyle, sharedStyle, barSeriesStyle }, + theme: { axes: sharedAxesStyle, sharedStyle, barSeriesStyle, background }, highlightedLegendItem, annotationDimensions, annotationSpecs, @@ -133,6 +133,7 @@ export function renderXYChartCanvas2d( rotation, debug, barSeriesStyle, + background, }), ), diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/values/bar.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/values/bar.ts index d027919f68..594048d755 100644 --- a/packages/charts/src/chart_types/xy_chart/renderer/canvas/values/bar.ts +++ b/packages/charts/src/chart_types/xy_chart/renderer/canvas/values/bar.ts @@ -13,7 +13,7 @@ import { Rect } from '../../../../../geoms/types'; import { HorizontalAlignment, Rotation, VerticalAlignment } from '../../../../../utils/common'; import { Dimensions } from '../../../../../utils/dimensions'; import { BarGeometry } from '../../../../../utils/geometry'; -import { TextAlignment, Theme } from '../../../../../utils/themes/theme'; +import { BackgroundStyle, TextAlignment, Theme } from '../../../../../utils/themes/theme'; import { LabelOverflowConstraint } from '../../../utils/specs'; import { renderText, wrapLines } from '../primitives/text'; import { renderDebugRect } from '../utils/debug'; @@ -26,6 +26,7 @@ interface BarValuesProps { debug: boolean; bars: BarGeometry[]; panel: Dimensions; + background: BackgroundStyle; } const CHART_DIRECTION: Record = { @@ -37,7 +38,7 @@ const CHART_DIRECTION: Record = { /** @internal */ export function renderBarValues(ctx: CanvasRenderingContext2D, props: BarValuesProps) { - const { bars, debug, rotation, renderingArea, barSeriesStyle, panel } = props; + const { bars, debug, rotation, renderingArea, barSeriesStyle, panel, background } = props; const { fontFamily, fontStyle, fill, alignment } = barSeriesStyle.displayValue; bars.forEach((bar) => { if (!bar.displayValue) { @@ -45,7 +46,7 @@ export function renderBarValues(ctx: CanvasRenderingContext2D, props: BarValuesP } const { text, fontSize, fontScale, overflowConstraints, isValueContainedInElement } = bar.displayValue; const shadowSize = getTextBorderSize(fill); - const { fillColor, shadowColor } = getTextColors(fill, bar.color); + const { fillColor, shadowColor } = getTextColors(fill, bar.color, background); const font: Font = { fontFamily, fontStyle: fontStyle ?? 'normal', @@ -193,6 +194,7 @@ type ValueFillDefinition = Theme['barSeriesStyle']['displayValue']['fill']; function getTextColors( fillDefinition: ValueFillDefinition, geometryColor: string, + { color: backgroundColor, fallbackColor: fallbackBGColor }: BackgroundStyle, ): { fillColor: string; shadowColor: string } { if (typeof fillDefinition === 'string') { return { fillColor: fillDefinition, shadowColor: Colors.Transparent.keyword }; @@ -203,9 +205,8 @@ function getTextColors( shadowColor: fillDefinition.borderColor || Colors.Transparent.keyword, }; } - const fillColor = fillTextColor(geometryColor); - - const shadowColor = fillTextColor(fillColor); + const fillColor = fillTextColor(fallbackBGColor, geometryColor, backgroundColor); + const shadowColor = fillTextColor(fallbackBGColor, fillColor, backgroundColor); return { fillColor, diff --git a/packages/charts/src/common/color_calcs.test.ts b/packages/charts/src/common/color_calcs.test.ts index 559b7d62e4..bc71bb725d 100644 --- a/packages/charts/src/common/color_calcs.test.ts +++ b/packages/charts/src/common/color_calcs.test.ts @@ -8,23 +8,11 @@ import { integerSnap, monotonicHillClimb } from '../solvers/monotonic_hill_climb'; import { highContrastColor, combineColors } from './color_calcs'; -import { RgbaTuple, RGBATupleToString } from './color_library_wrappers'; +import { RgbaTuple } from './color_library_wrappers'; import { Colors } from './colors'; -import { fillTextColor } from './fill_text_color'; describe('Color calcs', () => { describe('test highContrastColor', () => { - it('should return black when background is white', () => { - expect(fillTextColor(Colors.White.keyword)).toEqual(RGBATupleToString(Colors.Black.rgba)); - }); - // test contrast computation - it('should return black with yellow/semi-transparent background', () => { - expect(fillTextColor(`rgba(255,255,51,0.3)`)).toEqual(RGBATupleToString(Colors.Black.rgba)); - }); - it('should use white text for Thailand color', () => { - // black for WCAG2, white for WCAG3 - expect(fillTextColor(`rgba(120, 116, 178, 1)`)).toEqual(RGBATupleToString(Colors.Black.rgba)); - }); it('should switch to black text if background color is in rgba() format - Thailand', () => { const background: RgbaTuple = [120, 116, 178, 0.7]; const blendedBackground: RgbaTuple = [161, 158, 201, 1]; diff --git a/packages/charts/src/common/color_library_wrappers.ts b/packages/charts/src/common/color_library_wrappers.ts index cd15a1f268..00a59433d3 100644 --- a/packages/charts/src/common/color_library_wrappers.ts +++ b/packages/charts/src/common/color_library_wrappers.ts @@ -20,7 +20,7 @@ export type RGB = number; export type A = number; /** @internal */ -export type RgbTuple = [RGB, RGB, RGB, A?]; +export type RgbTuple = [r: RGB, g: RGB, b: RGB, alpha?: A]; /** @public */ export type RgbaTuple = [r: RGB, g: RGB, b: RGB, alpha: A]; diff --git a/packages/charts/src/common/fill_text_color.test.ts b/packages/charts/src/common/fill_text_color.test.ts new file mode 100644 index 0000000000..38078e18ce --- /dev/null +++ b/packages/charts/src/common/fill_text_color.test.ts @@ -0,0 +1,63 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { RGBATupleToString } from './color_library_wrappers'; +import { Colors } from './colors'; +import { fillTextColor, TRANSPARENT_LIMIT } from './fill_text_color'; + +describe('Fill text color', () => { + describe('highContrastColor', () => { + it('should return black when background is white', () => { + expect(fillTextColor(Colors.White.keyword, null, Colors.White.keyword)).toEqual( + RGBATupleToString(Colors.Black.rgba), + ); + }); + // test contrast computation + it('should return black with yellow/semi-transparent background', () => { + expect(fillTextColor(Colors.White.keyword, null, 'rgba(255,255,51,0.3)')).toEqual( + RGBATupleToString(Colors.Black.rgba), + ); + }); + it('should use white text for Thailand color', () => { + // black for WCAG2, white for WCAG3 + expect(fillTextColor(Colors.White.keyword, null, 'rgba(120, 116, 178, 1)')).toEqual( + RGBATupleToString(Colors.Black.rgba), + ); + }); + }); + + describe('FallbackBG color', () => { + const fallbackBG = Colors.White.keyword; + + it('should use fallbackBG if background is transparent and no foreground', () => { + expect(fillTextColor(fallbackBG, null, Colors.Transparent.keyword)).toEqual('rgba(0, 0, 0, 1)'); + }); + + it('should use fallbackBG if background is lower tranparent limit and no foreground', () => { + expect(fillTextColor(fallbackBG, null, `rgba(120, 116, 178, ${TRANSPARENT_LIMIT - Number.EPSILON})`)).toEqual( + 'rgba(0, 0, 0, 1)', + ); + }); + + it('should contrast fallbackBG with foreground if background is transparent', () => { + expect(fillTextColor(fallbackBG, 'rgba(0, 0, 255, 1)', Colors.Transparent.keyword)).toEqual( + 'rgba(255, 255, 255, 1)', + ); + }); + + it('should contrast fallbackBG with transparent foreground if background is transparent', () => { + expect( + fillTextColor(fallbackBG, `rgba(0, 0, 255, ${TRANSPARENT_LIMIT - Number.EPSILON})`, Colors.Transparent.keyword), + ).toEqual('rgba(0, 0, 0, 1)'); + }); + + it('should return constrast with opac foreground and opac background', () => { + expect(fillTextColor(fallbackBG, 'rgba(0, 0, 255, 1)', 'rgba(255, 0, 0, 1)')).toEqual('rgba(255, 255, 255, 1)'); + }); + }); +}); diff --git a/packages/charts/src/common/fill_text_color.ts b/packages/charts/src/common/fill_text_color.ts index 35cc107431..62c242ba54 100644 --- a/packages/charts/src/common/fill_text_color.ts +++ b/packages/charts/src/common/fill_text_color.ts @@ -11,12 +11,33 @@ import { colorToRgba, RGBATupleToString } from './color_library_wrappers'; import { Color, Colors } from './colors'; /** - * Determine the color for the text hinging on the parameters of maximizeColorContrast, foreground and containerBackground + * limit used to return fallback color * @internal */ -export function fillTextColor(background: Color, containerBg: Color = Colors.White.keyword): Color { - const backgroundRGBA = colorToRgba(background); - const containerBgRGBA = combineColors(colorToRgba(containerBg), Colors.White.rgba); // combine it with white if semi-transparent - const blendedFbBg = combineColors(backgroundRGBA, containerBgRGBA); - return RGBATupleToString(highContrastColor(blendedFbBg)); +export const TRANSPARENT_LIMIT = 0.6; + +/** + * Determine the text color hinging on the parameters of maximizeColorContrast, foreground and container foreground + * returns high contrast color blend from fg anf bg when suitable, otherwise returns fallback color + * + * @internal + */ +export function fillTextColor( + fallbackBGColor: Color, + foreground: Color | null, + background: Color = Colors.Transparent.keyword, +): Color { + let backgroundRGBA = colorToRgba(background); + + if (backgroundRGBA[3] < TRANSPARENT_LIMIT) { + backgroundRGBA = colorToRgba(fallbackBGColor); + } + + if (foreground) { + const foregroundRGBA = colorToRgba(foreground); + const blendedFgBg = combineColors(foregroundRGBA, backgroundRGBA); + return RGBATupleToString(highContrastColor(blendedFgBg)); + } + + return RGBATupleToString(highContrastColor(backgroundRGBA)); } diff --git a/packages/charts/src/components/accessibility/accessibility.test.tsx b/packages/charts/src/components/accessibility/accessibility.test.tsx index c45cfda94e..6e3e1f9d42 100644 --- a/packages/charts/src/components/accessibility/accessibility.test.tsx +++ b/packages/charts/src/components/accessibility/accessibility.test.tsx @@ -11,7 +11,7 @@ import React from 'react'; import { Goal } from '../../chart_types/goal_chart/specs'; import { GoalSubtype } from '../../chart_types/goal_chart/specs/constants'; -import { config } from '../../chart_types/partition_chart/layout/config'; +import { defaultPartitionValueFormatter } from '../../chart_types/partition_chart/layout/config'; import { PartitionLayout } from '../../chart_types/partition_chart/layout/types/config_types'; import { arrayToLookup } from '../../common/color_calcs'; import { mocks } from '../../mocks/hierarchical'; @@ -53,7 +53,7 @@ describe('Accessibility', () => { id="spec_1" data={mocks.pie} valueAccessor={(d: Datum) => d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -69,17 +69,15 @@ describe('Accessibility', () => { d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, nodeLabel: (d: Datum) => productLookup[d].name, }, ]} - config={{ - partitionLayout: PartitionLayout.treemap, - }} /> , ); diff --git a/packages/charts/src/index.ts b/packages/charts/src/index.ts index 94f7d8c7ad..fed4166428 100644 --- a/packages/charts/src/index.ts +++ b/packages/charts/src/index.ts @@ -43,11 +43,8 @@ export { export { GeometryValue, BandedAccessorType } from './utils/geometry'; export { LegendPath, LegendPathElement } from './state/actions/legend'; export { CategoryKey } from './common/category'; -export { - Config as PartitionConfig, - FillLabelConfig as PartitionFillLabel, - PartitionLayout, -} from './chart_types/partition_chart/layout/types/config_types'; +export { FillLabelConfig as PartitionFillLabel, PartitionStyle } from './utils/themes/partition'; +export { PartitionLayout } from './chart_types/partition_chart/layout/types/config_types'; export { Layer as PartitionLayer } from './chart_types/partition_chart/specs/index'; export * from './chart_types/goal_chart/specs/index'; export * from './chart_types/wordcloud/specs/index'; @@ -106,7 +103,7 @@ export { export { DataGenerator } from './utils/data_generators/data_generator'; export * from './utils/themes/merge_utils'; export * from './utils/use_legend_action'; -export { MODEL_KEY } from './chart_types/partition_chart/layout/config'; +export { MODEL_KEY, defaultPartitionValueFormatter } from './chart_types/partition_chart/layout/config'; export { LegendStrategy } from './chart_types/partition_chart/layout/utils/highlighted_geoms'; export { Pixels, Ratio } from './common/geometry'; export { AdditiveNumber } from './utils/accessor'; diff --git a/packages/charts/src/mocks/specs/specs.ts b/packages/charts/src/mocks/specs/specs.ts index a59fecca2f..5520dfe6ea 100644 --- a/packages/charts/src/mocks/specs/specs.ts +++ b/packages/charts/src/mocks/specs/specs.ts @@ -8,7 +8,7 @@ import { ChartType } from '../../chart_types'; import { X_SCALE_DEFAULT } from '../../chart_types/heatmap/specs/scale_defaults'; -import { config, percentFormatter } from '../../chart_types/partition_chart/layout/config'; +import { percentFormatter } from '../../chart_types/partition_chart/layout/config'; import { PartitionLayout } from '../../chart_types/partition_chart/layout/types/config_types'; import { ShapeTreeNode } from '../../chart_types/partition_chart/layout/types/viewmodel_types'; import { AGGREGATE_KEY, PrimitiveValue } from '../../chart_types/partition_chart/layout/utils/group_by_rollup'; @@ -124,16 +124,21 @@ export class MockSeriesSpec { chartType: ChartType.Partition, specType: SpecType.Series, id: 'spec1', - config: { - ...config, - partitionLayout: PartitionLayout.sunburst, - }, + layout: PartitionLayout.sunburst, valueAccessor: (d: Datum) => (typeof d === 'number' ? d : 0), valueGetter: (n: ShapeTreeNode): number => n[AGGREGATE_KEY], valueFormatter: (d: number): string => String(d), percentFormatter, topGroove: 0, smallMultiples: null, + clockwiseSectors: true, + specialFirstInnermostSector: true, + drilldown: false, + maxRowCount: 12, + fillOutside: false, + radiusOutside: 128, + fillRectangleWidth: Infinity, + fillRectangleHeight: Infinity, layers: [ { groupByRollup: (d: Datum, i: number) => i, @@ -149,16 +154,21 @@ export class MockSeriesSpec { chartType: ChartType.Partition, specType: SpecType.Series, id: 'spec1', - config: { - ...config, - partitionLayout: PartitionLayout.treemap, - }, + layout: PartitionLayout.treemap, valueAccessor: (d: Datum) => (typeof d === 'number' ? d : 0), valueGetter: (n: ShapeTreeNode): number => n[AGGREGATE_KEY], valueFormatter: (d: number): string => String(d), percentFormatter, topGroove: 20, smallMultiples: null, + clockwiseSectors: true, + specialFirstInnermostSector: true, + drilldown: false, + maxRowCount: 12, + fillOutside: false, + radiusOutside: 128, + fillRectangleWidth: Infinity, + fillRectangleHeight: Infinity, layers: [ { groupByRollup: (d: Datum, i: number) => i, @@ -369,6 +379,7 @@ export class MockAnnotationSpec { }; static line(partial?: Partial): LineAnnotationSpec { + // @ts-ignore - nesting limitation return mergePartial(MockAnnotationSpec.lineBase, partial); } diff --git a/packages/charts/src/state/selectors/get_chart_theme.ts b/packages/charts/src/state/selectors/get_chart_theme.ts index e3a431e6ee..4b94da04c9 100644 --- a/packages/charts/src/state/selectors/get_chart_theme.ts +++ b/packages/charts/src/state/selectors/get_chart_theme.ts @@ -6,7 +6,9 @@ * Side Public License, v 1. */ +import { colorToRgba, overrideOpacity, RGBATupleToString } from '../../common/color_library_wrappers'; import { mergePartial } from '../../utils/common'; +import { Logger } from '../../utils/logger'; import { LIGHT_THEME } from '../../utils/themes/light_theme'; import { PartialTheme, Theme } from '../../utils/themes/theme'; import { createCustomCachedSelector } from '../create_selector'; @@ -23,8 +25,24 @@ function getTheme(baseTheme?: Theme, theme?: PartialTheme | PartialTheme[]): The if (Array.isArray(theme)) { const [firstTheme, ...axillaryThemes] = theme; - return mergePartial(base, firstTheme, {}, axillaryThemes); + return validateTheme(mergePartial(base, firstTheme, {}, axillaryThemes)); } - return theme ? mergePartial(base, theme) : base; + return validateTheme(theme ? mergePartial(base, theme) : base); +} + +/** + * Validation for final theme object used throughout charts + * + * Note: mutates theme in place + */ +function validateTheme(theme: Theme): Theme { + const fallbackRGBA = colorToRgba(theme.background.fallbackColor); + if (fallbackRGBA[3] !== 1) { + Logger.warn(`background.fallbackColor must be opaque, found alpha of ${fallbackRGBA[3]}. Overriding alpha to 1.`); + const newFallback = overrideOpacity(fallbackRGBA, 1); + theme.background.fallbackColor = RGBATupleToString(newFallback); + } + + return theme; } diff --git a/packages/charts/src/utils/dimensions.ts b/packages/charts/src/utils/dimensions.ts index e58d06975b..405476da8b 100644 --- a/packages/charts/src/utils/dimensions.ts +++ b/packages/charts/src/utils/dimensions.ts @@ -38,7 +38,10 @@ export interface PerSideDistance { */ export type Margins = PerSideDistance; -/** @public */ +/** + * todo seperate type with parition padding type that allows number + * @public + */ export type Padding = PerSideDistance; /** diff --git a/packages/charts/src/utils/themes/dark_theme.ts b/packages/charts/src/utils/themes/dark_theme.ts index 64df26b235..330e5b9883 100644 --- a/packages/charts/src/utils/themes/dark_theme.ts +++ b/packages/charts/src/utils/themes/dark_theme.ts @@ -7,6 +7,7 @@ */ import { Colors } from '../../common/colors'; +import { GOLDEN_RATIO, TAU } from '../../common/constants'; import { ColorVariant } from '../common'; import { palettes } from './colors'; import { Theme } from './theme'; @@ -215,6 +216,7 @@ export const DARK_THEME: Theme = { }, background: { color: 'transparent', + fallbackColor: Colors.Black.keyword, }, goal: { minFontSize: 8, @@ -254,6 +256,59 @@ export const DARK_THEME: Theme = { stroke: 'white', }, }, + partition: { + outerSizeRatio: 1 / GOLDEN_RATIO, + emptySizeRatio: 0, + fontFamily: 'Sans-Serif', + minFontSize: 8, + maxFontSize: 64, + idealFontSizeJump: 1.05, + maximizeFontSize: false, + circlePadding: 2, + radialPadding: TAU / 360, + horizontalTextAngleThreshold: TAU / 12, + horizontalTextEnforcer: 1, + fillLabel: { + textColor: ColorVariant.Adaptive, + fontFamily: 'Sans-Serif', + fontStyle: 'normal', + fontVariant: 'normal', + fontWeight: 400, + valueFont: { + fontWeight: 400, + fontStyle: 'normal', + fontVariant: 'normal', + }, + padding: 2, + clipText: false, + }, + linkLabel: { + maximumSection: 10, + fontFamily: 'Sans-Serif', + fontSize: 12, + fontStyle: 'normal', + fontVariant: 'normal', + fontWeight: 400, + gap: 10, + spacing: 2, + horizontalStemLength: 10, + radiusPadding: 10, + lineWidth: 1, + maxCount: 36, + maxTextLength: 100, + textColor: ColorVariant.Adaptive, + minimumStemLength: 0, + stemAngle: TAU / 8, + padding: 0, + valueFont: { + fontWeight: 400, + fontStyle: 'normal', + fontVariant: 'normal', + }, + }, + sectorLineWidth: 1, + sectorLineStroke: 'black', + }, heatmap: { maxRowHeight: 30, maxColumnWidth: 30, diff --git a/packages/charts/src/utils/themes/light_theme.ts b/packages/charts/src/utils/themes/light_theme.ts index 637bb891ef..d7fb2d8818 100644 --- a/packages/charts/src/utils/themes/light_theme.ts +++ b/packages/charts/src/utils/themes/light_theme.ts @@ -7,6 +7,7 @@ */ import { Colors } from '../../common/colors'; +import { GOLDEN_RATIO, TAU } from '../../common/constants'; import { ColorVariant } from '../common'; import { palettes } from './colors'; import { Theme } from './theme'; @@ -215,6 +216,7 @@ export const LIGHT_THEME: Theme = { }, background: { color: Colors.Transparent.keyword, + fallbackColor: Colors.White.keyword, }, goal: { minFontSize: 8, @@ -254,6 +256,59 @@ export const LIGHT_THEME: Theme = { stroke: Colors.Black.keyword, }, }, + partition: { + outerSizeRatio: 1 / GOLDEN_RATIO, + emptySizeRatio: 0, + fontFamily: 'Sans-Serif', + minFontSize: 8, + maxFontSize: 64, + idealFontSizeJump: 1.05, + maximizeFontSize: false, + circlePadding: 2, + radialPadding: TAU / 360, + horizontalTextAngleThreshold: TAU / 12, + horizontalTextEnforcer: 1, + fillLabel: { + textColor: ColorVariant.Adaptive, + fontFamily: 'Sans-Serif', + fontStyle: 'normal', + fontVariant: 'normal', + fontWeight: 400, + valueFont: { + fontWeight: 400, + fontStyle: 'normal', + fontVariant: 'normal', + }, + padding: 2, + clipText: false, + }, + linkLabel: { + maximumSection: 10, + fontFamily: 'Sans-Serif', + fontSize: 12, + fontStyle: 'normal', + fontVariant: 'normal', + fontWeight: 400, + gap: 10, + spacing: 2, + horizontalStemLength: 10, + radiusPadding: 10, + lineWidth: 1, + maxCount: 36, + maxTextLength: 100, + textColor: ColorVariant.Adaptive, + minimumStemLength: 0, + stemAngle: TAU / 8, + padding: 0, + valueFont: { + fontWeight: 400, + fontStyle: 'normal', + fontVariant: 'normal', + }, + }, + sectorLineWidth: 1, + sectorLineStroke: 'white', + }, heatmap: { maxRowHeight: 30, maxColumnWidth: 30, diff --git a/packages/charts/src/utils/themes/partition.ts b/packages/charts/src/utils/themes/partition.ts new file mode 100644 index 0000000000..62bcd33875 --- /dev/null +++ b/packages/charts/src/utils/themes/partition.ts @@ -0,0 +1,85 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { Color } from '../../common/colors'; +import { Pixels, Distance, Radian, SizeRatio, Ratio } from '../../common/geometry'; +import { Font, PartialFont, FontFamily } from '../../common/text_utils'; +import { ColorVariant, StrokeStyle } from '../common'; +import { PerSideDistance } from '../dimensions'; + +interface LabelConfig extends Font { + textColor: Color | typeof ColorVariant.Adaptive; + valueFont: PartialFont; + padding: Pixels | Partial; +} + +/** @public */ +export type Padding = Pixels | Partial; + +/** @public */ +export interface FillLabelConfig extends LabelConfig { + clipText: boolean; +} + +/** @public */ +export interface FillFontSizeRange { + minFontSize: Pixels; + maxFontSize: Pixels; + idealFontSizeJump: Ratio; + /** + * When `maximizeFontSize` is false (the default), text font will not be larger than font sizes in larger sectors/rectangles in the same pie chart, + * sunburst ring or treemap layer. When it is set to true, the largest font, not exceeding `maxFontSize`, that fits in the slice/sector/rectangle + * will be chosen for easier text readability, irrespective of the value. + */ + maximizeFontSize: boolean; +} + +/** @public */ +export interface LinkLabelConfig extends LabelConfig { + fontSize: Pixels; // todo consider putting it in Font + /** + * Uses linked labels below this limit of the outer sector arc length (in pixels) + */ + maximumSection: Distance; + gap: Pixels; + spacing: Pixels; + minimumStemLength: Distance; + stemAngle: Radian; + horizontalStemLength: Distance; + radiusPadding: Distance; + lineWidth: Pixels; + /** + * Limits the total count of linked labels. The first N largest slices are kept. + */ + maxCount: number; + /** + * Limits the total number of characters in linked labels. + */ + maxTextLength: number; +} + +/** @public */ +export interface PartitionStyle extends FillFontSizeRange { + /** + * The diameter of the inner circle, relative to `outerSizeRatio` + */ + emptySizeRatio: SizeRatio; + /** + * The diameter of the entire circle, relative to the smaller of the usable rectangular size (smaller of width/height minus the margins) + */ + outerSizeRatio: SizeRatio; + fontFamily: FontFamily; + circlePadding: Distance; + radialPadding: Distance; + horizontalTextAngleThreshold: Radian; + horizontalTextEnforcer: Ratio; + fillLabel: FillLabelConfig; + linkLabel: LinkLabelConfig; + sectorLineWidth: Pixels; + sectorLineStroke: StrokeStyle; +} diff --git a/packages/charts/src/utils/themes/theme.ts b/packages/charts/src/utils/themes/theme.ts index daaa5bf6e6..4f12d4568b 100644 --- a/packages/charts/src/utils/themes/theme.ts +++ b/packages/charts/src/utils/themes/theme.ts @@ -14,6 +14,7 @@ import { Font, FontStyle, TextAlign, TextBaseline } from '../../common/text_util import { ColorVariant, HorizontalAlignment, RecursivePartial, VerticalAlignment } from '../common'; import { Margins, SimplePadding } from '../dimensions'; import { Point } from '../point'; +import { PartitionStyle } from './partition'; /** @public */ export interface Visible { @@ -288,6 +289,11 @@ export interface BackgroundStyle { * The background color */ color: string; + /** + * The fallback background color used for constrast logic. + * Must be opaque, alpha value will be ignored otherwise. + */ + fallbackColor: Color; } /** @public */ @@ -393,7 +399,17 @@ export interface Theme { * This can then be used to calculate the contrast of the text for partition charts. */ background: BackgroundStyle; + /** + * Theme styles for goal and gauge chart types + */ goal: GoalStyles; + /** + * Theme styles for partition chart types + */ + partition: PartitionStyle; + /** + * Theme styles for heatmap chart types + */ heatmap: HeatmapStyle; } diff --git a/storybook/stories/heatmap/1_basic.story.tsx b/storybook/stories/heatmap/1_basic.story.tsx index 4af50ea5bd..1e3e4d3e0d 100644 --- a/storybook/stories/heatmap/1_basic.story.tsx +++ b/storybook/stories/heatmap/1_basic.story.tsx @@ -14,15 +14,15 @@ import { debounce } from 'ts-debounce'; import { Chart, DebugState, + ElementClickListener, Heatmap, + HeatmapBrushEvent, HeatmapElementEvent, HeatmapStyle, niceTimeFormatter, RecursivePartial, ScaleType, Settings, - HeatmapBrushEvent, - ElementClickListener, } from '@elastic/charts'; import { DATA_6 } from '../../../packages/charts/src/utils/data_samples/test_dataset_heatmap'; @@ -89,9 +89,8 @@ export const Example = () => { } }, 100); - const onElementClick: ElementClickListener = useCallback((event) => { - const e = event as HeatmapElementEvent[]; - const cell = e[0][0]; + const onElementClick: ElementClickListener = useCallback((e) => { + const cell = (e as HeatmapElementEvent[])[0][0]; setSelection({ x: [cell.datum.x, cell.datum.x], y: [cell.datum.y] }); }, []); diff --git a/storybook/stories/icicle/01_unix_icicle.story.tsx b/storybook/stories/icicle/01_unix_icicle.story.tsx index d1ef1ce742..41015e2b53 100644 --- a/storybook/stories/icicle/01_unix_icicle.story.tsx +++ b/storybook/stories/icicle/01_unix_icicle.story.tsx @@ -11,7 +11,7 @@ import React from 'react'; import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; -import { config, getFlatData, getLayerSpec, maxDepth } from '../utils/hierarchical_input_utils'; +import { getFlatData, getLayerSpec, maxDepth } from '../utils/hierarchical_input_utils'; import { viridis18 as palette } from '../utils/utils'; const color = palette.slice().reverse(); @@ -19,14 +19,26 @@ const color = palette.slice().reverse(); export const Example = () => { return ( - + d.value as number} valueFormatter={() => ''} layers={getLayerSpec(color)} - config={{ ...config, partitionLayout: PartitionLayout.icicle }} /> ); diff --git a/storybook/stories/icicle/02_unix_flame.story.tsx b/storybook/stories/icicle/02_unix_flame.story.tsx index 3fa7b2f11f..79161fd222 100644 --- a/storybook/stories/icicle/02_unix_flame.story.tsx +++ b/storybook/stories/icicle/02_unix_flame.story.tsx @@ -11,7 +11,7 @@ import React from 'react'; import { Chart, Datum, LegendStrategy, Partition, PartitionLayout, Settings } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; -import { config, getFlatData, getLayerSpec, maxDepth } from '../utils/hierarchical_input_utils'; +import { getFlatData, getLayerSpec, maxDepth } from '../utils/hierarchical_input_utils'; import { plasma18 as palette } from '../utils/utils'; const color = [...palette].reverse(); @@ -26,14 +26,21 @@ export const Example = () => { legendStrategy={LegendStrategy.PathWithDescendants} legendMaxDepth={maxDepth} baseTheme={useBaseTheme()} + theme={{ + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + minFontSize: 6, + maxFontSize: 10, + }, + }} /> d.value as number} + layout={PartitionLayout.flame} + valueAccessor={(d: Datum) => d.value} valueFormatter={() => ''} layers={getLayerSpec(color)} - config={{ ...config, partitionLayout: PartitionLayout.flame }} /> ); diff --git a/storybook/stories/icicle/03_cpu_profile_flame.story.tsx b/storybook/stories/icicle/03_cpu_profile_flame.story.tsx index d5034f4a0e..ee43eac56a 100644 --- a/storybook/stories/icicle/03_cpu_profile_flame.story.tsx +++ b/storybook/stories/icicle/03_cpu_profile_flame.story.tsx @@ -9,11 +9,10 @@ import { boolean } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, PrimitiveValue, Settings } from '@elastic/charts'; +import { Chart, Datum, Partition, PartitionLayout, PrimitiveValue, Settings, PartialTheme } from '@elastic/charts'; import data from '@elastic/charts/src/mocks/hierarchical/cpu_profile_tree_mock.json'; import { useBaseTheme } from '../../use_base_theme'; -import { config } from '../utils/hierarchical_input_utils'; import { discreteColor, viridis18 as palette } from '../utils/utils'; const color = palette.slice().reverse(); @@ -30,28 +29,31 @@ const getLayerSpec = (maxDepth: number = 30) => export const Example = () => { const clipText = boolean("Allow, and clip, texts that wouldn't otherwise fit", true); + const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + fillLabel: { + clipText, + padding: 0, + }, + minFontSize: clipText ? 9 : 6, + maxFontSize: clipText ? 9 : 20, + }, + }; return ( - + d.value as number} valueFormatter={() => ''} layers={getLayerSpec()} - config={{ - ...config, - partitionLayout: PartitionLayout.icicle, - drilldown: true, - fillLabel: { - ...config.fillLabel, - clipText, - padding: { left: 0, right: 0, top: 0, bottom: 0 }, - }, - minFontSize: clipText ? 9 : 6, - maxFontSize: clipText ? 9 : 20, - maxRowCount: 1, - animation: { duration: 500 }, + drilldown + maxRowCount={1} + animation={{ + duration: 500, }} /> diff --git a/storybook/stories/icicle/icicle.stories.tsx b/storybook/stories/icicle/icicle.stories.tsx index c623e4629f..b35472fb45 100644 --- a/storybook/stories/icicle/icicle.stories.tsx +++ b/storybook/stories/icicle/icicle.stories.tsx @@ -10,6 +10,6 @@ export default { title: 'Flame (@alpha)', }; -export { Example as cpuProfileFlameChart } from './03_cpu_profile_flame.story'; -export { Example as flameChart } from './02_unix_flame.story'; export { Example as icicleChart } from './01_unix_icicle.story'; +export { Example as flameChart } from './02_unix_flame.story'; +export { Example as cpuProfileFlameChart } from './03_cpu_profile_flame.story'; diff --git a/storybook/stories/interactions/17_png_export.story.tsx b/storybook/stories/interactions/17_png_export.story.tsx index d5c7d58e0f..ad25170f23 100644 --- a/storybook/stories/interactions/17_png_export.story.tsx +++ b/storybook/stories/interactions/17_png_export.story.tsx @@ -21,10 +21,10 @@ import { Datum, Goal, ChartType, + defaultPartitionValueFormatter, } from '@elastic/charts'; import { BandFillColorAccessorInput } from '@elastic/charts/src/chart_types/goal_chart/specs'; import { GoalSubtype } from '@elastic/charts/src/chart_types/goal_chart/specs/constants'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana'; @@ -82,7 +82,7 @@ function renderPartitionChart() { id="spec_1" data={mocks.pie} valueAccessor={(d: Datum) => d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, diff --git a/storybook/stories/interactions/4_sunburst_slice_clicks.story.tsx b/storybook/stories/interactions/4_sunburst_slice_clicks.story.tsx index 3d0965842a..92d566801e 100644 --- a/storybook/stories/interactions/4_sunburst_slice_clicks.story.tsx +++ b/storybook/stories/interactions/4_sunburst_slice_clicks.story.tsx @@ -48,11 +48,7 @@ const pieData: Array = [ ]; export const Example = () => { - const partitionLayout = select( - 'layout', - { sunburst: PartitionLayout.sunburst, treemap: PartitionLayout.treemap }, - 'sunburst', - ); + const layout = select('layout', { sunburst: PartitionLayout.sunburst, treemap: PartitionLayout.treemap }, 'sunburst'); return ( { showLegendExtra baseTheme={useBaseTheme()} legendPosition={Position.Right} + theme={{ + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + }} {...onElementListeners} /> d[3]} layers={[ { @@ -75,7 +72,7 @@ export const Example = () => { nodeLabel: (d) => `dest: ${d}`, shape: { fillColor: (d) => { - if (partitionLayout === 'sunburst') { + if (layout === 'sunburst') { // pick color from color palette based on mean angle - rather distinct colors in the inner ring return indexInterpolatedFillColor(interpolatorCET2s)(d, (d.x0 + d.x1) / 2 / (2 * Math.PI), []); } @@ -88,7 +85,7 @@ export const Example = () => { nodeLabel: (d) => `source: ${d}`, shape: { fillColor: (d) => { - if (partitionLayout === 'sunburst') { + if (layout === 'sunburst') { // pick color from color palette based on mean angle - rather distinct colors in the inner ring return indexInterpolatedFillColor(interpolatorCET2s)(d, (d.x0 + d.x1) / 2 / (2 * Math.PI), []); } diff --git a/storybook/stories/legend/10_sunburst.story.tsx b/storybook/stories/legend/10_sunburst.story.tsx index 8272bc3b0c..f5a71ed5d9 100644 --- a/storybook/stories/legend/10_sunburst.story.tsx +++ b/storybook/stories/legend/10_sunburst.story.tsx @@ -9,8 +9,17 @@ import { boolean, number, select } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, Datum, LegendStrategy, MODEL_KEY, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { + Chart, + Datum, + LegendStrategy, + MODEL_KEY, + PartialTheme, + Partition, + PartitionLayout, + Settings, + defaultPartitionValueFormatter, +} from '@elastic/charts'; import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; @@ -41,6 +50,27 @@ export const Example = () => { }); const legendStrategy = select('legendStrategy', LegendStrategy, LegendStrategy.Key as LegendStrategy); const maxLines = number('max legend label lines', 1, { min: 0, step: 1 }); + const partitionTheme: PartialTheme['partition'] = { + linkLabel: { + maxCount: 0, + fontSize: 14, + }, + fontFamily: 'Arial', + fillLabel: { + fontStyle: 'italic', + fontWeight: 900, + valueFont: { + fontFamily: 'Menlo', + fontStyle: 'normal', + fontWeight: 100, + }, + }, + minFontSize: 1, + idealFontSizeJump: 1.1, + outerSizeRatio: 1, + emptySizeRatio: 0, + circlePadding: 4, + }; return ( @@ -51,13 +81,18 @@ export const Example = () => { legendStrategy={legendStrategy} legendMaxDepth={legendMaxDepth} baseTheme={useBaseTheme()} - theme={{ legend: { labelOptions: { maxLines } } }} + theme={{ + partition: partitionTheme, + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + legend: { labelOptions: { maxLines } }, + }} /> d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -82,31 +117,6 @@ export const Example = () => { }, }, ]} - config={{ - partitionLayout, - linkLabel: { - maxCount: 0, - fontSize: 14, - }, - fontFamily: 'Arial', - fillLabel: { - valueFormatter: (d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, - fontStyle: 'italic', - fontWeight: 900, - valueFont: { - fontFamily: 'Menlo', - fontStyle: 'normal', - fontWeight: 100, - }, - }, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - minFontSize: 1, - idealFontSizeJump: 1.1, - outerSizeRatio: 1, - emptySizeRatio: 0, - circlePadding: 4, - backgroundColor: 'rgba(229,229,229,1)', - }} /> ); diff --git a/storybook/stories/legend/10_sunburst_repeated_label.story.tsx b/storybook/stories/legend/10_sunburst_repeated_label.story.tsx index 0e98a07ee1..3abf16738c 100644 --- a/storybook/stories/legend/10_sunburst_repeated_label.story.tsx +++ b/storybook/stories/legend/10_sunburst_repeated_label.story.tsx @@ -31,6 +31,9 @@ export const Example = () => { legendStrategy={select('legendStrategy', LegendStrategy, LegendStrategy.Key)} legendMaxDepth={legendMaxDepth} baseTheme={useBaseTheme()} + theme={{ + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + }} /> { showLegend={boolean('Show legend', true)} showLegendExtra={boolean('Show legend values', true)} flatLegend={boolean('Flat legend', false)} + theme={{ + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + linkLabel: { maxCount: 0 }, // relevant for sunburst only + outerSizeRatio: 0.9, // relevant for sunburst only + }, + }} baseTheme={useBaseTheme()} /> d.exportVal as AdditiveNumber} - valueFormatter={(d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}`} + valueFormatter={(d: number) => `${defaultPartitionValueFormatter(Math.round(d / 1000000000))}`} layers={[ { groupByRollup: (d: Datum) => countryLookup[d.dest].continentCountry.slice(0, 2), @@ -107,11 +115,6 @@ export const Example = () => { }, }, ]} - config={{ - partitionLayout, - linkLabel: { maxCount: 0 }, // relevant for sunburst only - outerSizeRatio: 0.9, // relevant for sunburst only - }} /> ); diff --git a/storybook/stories/mosaic/20_mosaic_with_other.story.tsx b/storybook/stories/mosaic/20_mosaic_with_other.story.tsx index 39bb3c7e4d..0f67d6c860 100644 --- a/storybook/stories/mosaic/20_mosaic_with_other.story.tsx +++ b/storybook/stories/mosaic/20_mosaic_with_other.story.tsx @@ -19,8 +19,8 @@ import { PartitionLayout, Settings, ShapeTreeNode, + defaultPartitionValueFormatter, } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; import { useBaseTheme } from '../../use_base_theme'; import { countryLookup } from '../utils/utils'; @@ -45,12 +45,18 @@ export const Example = () => { const otherOnBottom = boolean('"Other" on bottom even if not the smallest', true); return ( - + d.exportVal as AdditiveNumber} - valueFormatter={(d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}`} + valueFormatter={(d: number) => `${defaultPartitionValueFormatter(Math.round(d / 1000000000))}`} layers={[ { groupByRollup: (d: Datum) => d.region, @@ -98,9 +104,6 @@ export const Example = () => { }, }, ]} - config={{ - partitionLayout: PartitionLayout.mosaic, - }} /> ); diff --git a/storybook/stories/small_multiples/7_sunbursts.story.tsx b/storybook/stories/small_multiples/7_sunbursts.story.tsx index b3f6257ede..da0bddc831 100644 --- a/storybook/stories/small_multiples/7_sunbursts.story.tsx +++ b/storybook/stories/small_multiples/7_sunbursts.story.tsx @@ -15,13 +15,14 @@ import { Datum, GroupBy, LegendStrategy, + PartialTheme, Partition, PartitionLayout, Settings, ShapeTreeNode, SmallMultiples, + defaultPartitionValueFormatter, } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { keepDistinct } from '@elastic/charts/src/utils/common'; @@ -55,6 +56,31 @@ const onElementListeners = { onElementOut: action('onElementOut'), }; +const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + chartPaddings: { top: 6, left: 8, bottom: 6, right: 8 }, + partition: { + linkLabel: { + maxCount: 0, + }, + fontFamily: 'Arial', + fillLabel: { + fontStyle: 'italic', + fontWeight: 900, + valueFont: { + fontFamily: 'Menlo', + fontStyle: 'normal', + fontWeight: 100, + }, + }, + minFontSize: 1, + idealFontSizeJump: 1.1, + outerSizeRatio: 1, + emptySizeRatio: 0, + circlePadding: 4, + }, +}; + export const Example = () => { const layout = select( 'Inner breakdown layout', @@ -69,12 +95,13 @@ export const Example = () => { return ( { d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} smallMultiples="sm" layers={[ { @@ -143,30 +171,6 @@ export const Example = () => { }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - linkLabel: { - maxCount: 0, - }, - fontFamily: 'Arial', - fillLabel: { - valueFormatter: (d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, - fontStyle: 'italic', - fontWeight: 900, - valueFont: { - fontFamily: 'Menlo', - fontStyle: 'normal', - fontWeight: 100, - }, - }, - margin: { top: 0.01, bottom: 0.01, left: 0.01, right: 0.01 }, - minFontSize: 1, - idealFontSizeJump: 1.1, - outerSizeRatio: 1, - emptySizeRatio: 0, - circlePadding: 4, - backgroundColor: 'rgba(229,229,229,1)', - }} /> ); diff --git a/storybook/stories/stylings/20_partition_background.story.tsx b/storybook/stories/stylings/20_partition_background.story.tsx index b9e82fcd59..3bb8cc57d1 100644 --- a/storybook/stories/stylings/20_partition_background.story.tsx +++ b/storybook/stories/stylings/20_partition_background.story.tsx @@ -9,8 +9,16 @@ import { color, boolean } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, PartialTheme, Settings, MODEL_KEY } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { + Chart, + Datum, + Partition, + PartitionLayout, + PartialTheme, + Settings, + MODEL_KEY, + defaultPartitionValueFormatter, +} from '@elastic/charts'; import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; @@ -25,19 +33,44 @@ import { export const Example = () => { const bGColorDisabled = boolean('disable background color', false); - const partialColorTheme: PartialTheme = { + const bgColor = color('Background color', 'rgba(255, 255, 255, 1)'); + + const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, background: { - color: color('Background color', 'rgba(255, 255, 255, 1)'), + color: bGColorDisabled ? bgColor : undefined, + }, + partition: { + linkLabel: { + maxCount: 0, + fontSize: 14, + }, + fontFamily: 'Arial', + fillLabel: { + fontStyle: 'italic', + fontWeight: 900, + valueFont: { + fontFamily: 'Menlo', + fontStyle: 'normal', + fontWeight: 100, + }, + }, + minFontSize: 1, + idealFontSizeJump: 1.1, + outerSizeRatio: 1, + emptySizeRatio: 0, + circlePadding: 4, }, }; return ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -62,36 +95,11 @@ export const Example = () => { }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - linkLabel: { - maxCount: 0, - fontSize: 14, - }, - fontFamily: 'Arial', - fillLabel: { - valueFormatter: (d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, - fontStyle: 'italic', - fontWeight: 900, - valueFont: { - fontFamily: 'Menlo', - fontStyle: 'normal', - fontWeight: 100, - }, - }, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - minFontSize: 1, - idealFontSizeJump: 1.1, - outerSizeRatio: 1, - emptySizeRatio: 0, - circlePadding: 4, - backgroundColor: 'rgba(229,229,229,1)', - }} /> ); }; Example.parameters = { - backgrounds: { disable: true }, + background: { disable: true }, }; diff --git a/storybook/stories/stylings/21_partition_labels.story.tsx b/storybook/stories/stylings/21_partition_labels.story.tsx index 616b1ec9e4..58344ce685 100644 --- a/storybook/stories/stylings/21_partition_labels.story.tsx +++ b/storybook/stories/stylings/21_partition_labels.story.tsx @@ -9,8 +9,7 @@ import { color } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, Datum, Partition, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; @@ -18,6 +17,7 @@ import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '.. export const Example = () => { const partialCustomTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, background: { color: color('Change background container color', '#1c1c24'), }, @@ -29,7 +29,7 @@ export const Example = () => { id="spec_1" data={mocks.pie} valueAccessor={(d: Datum) => d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -45,5 +45,5 @@ export const Example = () => { }; Example.parameters = { - backgrounds: { disable: true }, + background: { disable: true }, }; diff --git a/storybook/stories/stylings/5_partial_custom_theme.story.tsx b/storybook/stories/stylings/5_partial_custom_theme.story.tsx index becb9e9898..1aec7002e5 100644 --- a/storybook/stories/stylings/5_partial_custom_theme.story.tsx +++ b/storybook/stories/stylings/5_partial_custom_theme.story.tsx @@ -58,5 +58,5 @@ export const Example = () => { }; Example.parameters = { - backgrounds: { disable: true }, + background: { disable: true }, }; diff --git a/storybook/stories/sunburst/10_2_slice.story.tsx b/storybook/stories/sunburst/10_2_slice.story.tsx index d238c5f013..58c45d1869 100644 --- a/storybook/stories/sunburst/10_2_slice.story.tsx +++ b/storybook/stories/sunburst/10_2_slice.story.tsx @@ -8,8 +8,7 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; @@ -17,12 +16,19 @@ import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '.. export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -32,7 +38,6 @@ export const Example = () => ( }, }, ]} - config={{ partitionLayout: PartitionLayout.sunburst }} /> ); diff --git a/storybook/stories/sunburst/11_small_large.story.tsx b/storybook/stories/sunburst/11_small_large.story.tsx index 5e25f947f9..f19a81671d 100644 --- a/storybook/stories/sunburst/11_small_large.story.tsx +++ b/storybook/stories/sunburst/11_small_large.story.tsx @@ -8,23 +8,29 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; import { indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils'; export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d))}`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d))}`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -34,12 +40,8 @@ export const Example = () => ( }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - clockwiseSectors: true, - specialFirstInnermostSector: false, - outerSizeRatio: 1, - }} + clockwiseSectors + specialFirstInnermostSector={false} /> ); diff --git a/storybook/stories/sunburst/12_very_small.story.tsx b/storybook/stories/sunburst/12_very_small.story.tsx index 4a13f6d496..dc397b8f61 100644 --- a/storybook/stories/sunburst/12_very_small.story.tsx +++ b/storybook/stories/sunburst/12_very_small.story.tsx @@ -8,23 +8,28 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; import { indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils'; export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d))}`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d))}`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -34,7 +39,6 @@ export const Example = () => ( }, }, ]} - config={{ partitionLayout: PartitionLayout.sunburst }} /> ); diff --git a/storybook/stories/sunburst/13_empty.story.tsx b/storybook/stories/sunburst/13_empty.story.tsx index c82b9dcd45..f3c164c6be 100644 --- a/storybook/stories/sunburst/13_empty.story.tsx +++ b/storybook/stories/sunburst/13_empty.story.tsx @@ -8,23 +8,28 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils'; export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d))}`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d))}`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -34,7 +39,6 @@ export const Example = () => ( }, }, ]} - config={{ partitionLayout: PartitionLayout.sunburst }} /> ); diff --git a/storybook/stories/sunburst/14_full_zero.story.tsx b/storybook/stories/sunburst/14_full_zero.story.tsx index 90571d951f..19917d5c48 100644 --- a/storybook/stories/sunburst/14_full_zero.story.tsx +++ b/storybook/stories/sunburst/14_full_zero.story.tsx @@ -8,23 +8,28 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils'; export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d))}`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d))}`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -34,7 +39,6 @@ export const Example = () => ( }, }, ]} - config={{ partitionLayout: PartitionLayout.sunburst }} /> ); diff --git a/storybook/stories/sunburst/15_single.story.tsx b/storybook/stories/sunburst/15_single.story.tsx index 4831eaf699..d9477b1a9c 100644 --- a/storybook/stories/sunburst/15_single.story.tsx +++ b/storybook/stories/sunburst/15_single.story.tsx @@ -8,8 +8,7 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; @@ -17,12 +16,18 @@ import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '.. export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -32,7 +37,6 @@ export const Example = () => ( }, }, ]} - config={{ partitionLayout: PartitionLayout.sunburst }} /> ); diff --git a/storybook/stories/sunburst/15_single_sunburst.story.tsx b/storybook/stories/sunburst/15_single_sunburst.story.tsx index 9d79a2f0d6..71dc36b5bb 100644 --- a/storybook/stories/sunburst/15_single_sunburst.story.tsx +++ b/storybook/stories/sunburst/15_single_sunburst.story.tsx @@ -8,8 +8,16 @@ import React from 'react'; -import { Chart, Datum, MODEL_KEY, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { + Chart, + Datum, + MODEL_KEY, + PartialTheme, + Partition, + PartitionLayout, + Settings, + defaultPartitionValueFormatter, +} from '@elastic/charts'; import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; @@ -22,14 +30,40 @@ import { regionLookup, } from '../utils/utils'; +const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + linkLabel: { + maxCount: 0, + fontSize: 14, + }, + fontFamily: 'Arial', + fillLabel: { + fontStyle: 'italic', + fontWeight: 900, + valueFont: { + fontFamily: 'Menlo', + fontStyle: 'normal', + fontWeight: 100, + }, + }, + minFontSize: 1, + idealFontSizeJump: 1.1, + outerSizeRatio: 1, + emptySizeRatio: 0, + circlePadding: 4, + }, +}; + export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -54,31 +88,6 @@ export const Example = () => ( }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - linkLabel: { - maxCount: 0, - fontSize: 14, - }, - fontFamily: 'Arial', - fillLabel: { - valueFormatter: (d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, - fontStyle: 'italic', - fontWeight: 900, - valueFont: { - fontFamily: 'Menlo', - fontStyle: 'normal', - fontWeight: 100, - }, - }, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - minFontSize: 1, - idealFontSizeJump: 1.1, - outerSizeRatio: 1, - emptySizeRatio: 0, - circlePadding: 4, - backgroundColor: 'rgba(229,229,229,1)', - }} /> ); diff --git a/storybook/stories/sunburst/16_single_small.story.tsx b/storybook/stories/sunburst/16_single_small.story.tsx index ce852dd92c..f65ab9ae6f 100644 --- a/storybook/stories/sunburst/16_single_small.story.tsx +++ b/storybook/stories/sunburst/16_single_small.story.tsx @@ -8,8 +8,7 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; @@ -17,12 +16,19 @@ import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '.. export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -32,7 +38,6 @@ export const Example = () => ( }, }, ]} - config={{ partitionLayout: PartitionLayout.sunburst, outerSizeRatio: 0.15 }} /> ); diff --git a/storybook/stories/sunburst/17_single_very_small.story.tsx b/storybook/stories/sunburst/17_single_very_small.story.tsx index 63071aca21..93603596c8 100644 --- a/storybook/stories/sunburst/17_single_very_small.story.tsx +++ b/storybook/stories/sunburst/17_single_very_small.story.tsx @@ -8,8 +8,7 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; @@ -17,12 +16,19 @@ import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '.. export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -32,7 +38,6 @@ export const Example = () => ( }, }, ]} - config={{ partitionLayout: PartitionLayout.sunburst, outerSizeRatio: 0.03 }} /> ); diff --git a/storybook/stories/sunburst/18_no_sliced.story.tsx b/storybook/stories/sunburst/18_no_sliced.story.tsx index 9367169189..750eff6fdc 100644 --- a/storybook/stories/sunburst/18_no_sliced.story.tsx +++ b/storybook/stories/sunburst/18_no_sliced.story.tsx @@ -8,20 +8,25 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils'; export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -31,7 +36,6 @@ export const Example = () => ( }, }, ]} - config={{ partitionLayout: PartitionLayout.sunburst }} /> ); diff --git a/storybook/stories/sunburst/19_negative.story.tsx b/storybook/stories/sunburst/19_negative.story.tsx index 60ad2cf33c..d578e2d0bf 100644 --- a/storybook/stories/sunburst/19_negative.story.tsx +++ b/storybook/stories/sunburst/19_negative.story.tsx @@ -8,8 +8,7 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; @@ -17,15 +16,21 @@ import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '.. export const Example = () => ( - + ({ ...s, exportVal: -0.1 }))) .concat(mocks.pie.slice(3))} + layout={PartitionLayout.sunburst} valueAccessor={(d: Datum) => d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -35,7 +40,6 @@ export const Example = () => ( }, }, ]} - config={{ partitionLayout: PartitionLayout.sunburst }} /> ); diff --git a/storybook/stories/sunburst/1_simple.story.tsx b/storybook/stories/sunburst/1_simple.story.tsx index cd519282a4..45037c8782 100644 --- a/storybook/stories/sunburst/1_simple.story.tsx +++ b/storybook/stories/sunburst/1_simple.story.tsx @@ -9,8 +9,7 @@ import { boolean } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, Datum, Partition, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; @@ -20,12 +19,18 @@ export const Example = () => { const showDebug = boolean('show table for debugging', false); return ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, diff --git a/storybook/stories/sunburst/20_total_zero.story.tsx b/storybook/stories/sunburst/20_total_zero.story.tsx index 665359a654..70819c38a4 100644 --- a/storybook/stories/sunburst/20_total_zero.story.tsx +++ b/storybook/stories/sunburst/20_total_zero.story.tsx @@ -8,8 +8,7 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; @@ -17,12 +16,18 @@ import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '.. export const Example = () => ( - + ({ ...s, exportVal: 0 }))} + layout={PartitionLayout.sunburst} valueAccessor={(d: Datum) => d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -32,7 +37,6 @@ export const Example = () => ( }, }, ]} - config={{ partitionLayout: PartitionLayout.sunburst }} /> ); diff --git a/storybook/stories/sunburst/21_high_pie.story.tsx b/storybook/stories/sunburst/21_high_pie.story.tsx index 2e314f45d1..0b161ddcf5 100644 --- a/storybook/stories/sunburst/21_high_pie.story.tsx +++ b/storybook/stories/sunburst/21_high_pie.story.tsx @@ -8,8 +8,7 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; @@ -17,12 +16,21 @@ import { countryLookup, indexInterpolatedFillColor, interpolatorCET2s } from '.. export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.origin, @@ -32,10 +40,6 @@ export const Example = () => ( }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - linkLabel: { maxCount: 15 }, - }} /> ); diff --git a/storybook/stories/sunburst/22_counter_clockwise.story.tsx b/storybook/stories/sunburst/22_counter_clockwise.story.tsx index 57e5a54b8d..90e2b1cbc8 100644 --- a/storybook/stories/sunburst/22_counter_clockwise.story.tsx +++ b/storybook/stories/sunburst/22_counter_clockwise.story.tsx @@ -8,8 +8,7 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; @@ -17,12 +16,18 @@ import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '.. export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -32,10 +37,7 @@ export const Example = () => ( }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - clockwiseSectors: false, - }} + clockwiseSectors={false} /> ); diff --git a/storybook/stories/sunburst/23_clockwise.story.tsx b/storybook/stories/sunburst/23_clockwise.story.tsx index 43675b0ae7..7307e08aac 100644 --- a/storybook/stories/sunburst/23_clockwise.story.tsx +++ b/storybook/stories/sunburst/23_clockwise.story.tsx @@ -8,8 +8,7 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; @@ -17,12 +16,18 @@ import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '.. export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -32,10 +37,7 @@ export const Example = () => ( }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - specialFirstInnermostSector: false, - }} + specialFirstInnermostSector={false} /> ); diff --git a/storybook/stories/sunburst/24_linked_label.story.tsx b/storybook/stories/sunburst/24_linked_label.story.tsx index 634e0ca488..002d48bfae 100644 --- a/storybook/stories/sunburst/24_linked_label.story.tsx +++ b/storybook/stories/sunburst/24_linked_label.story.tsx @@ -9,8 +9,7 @@ import { boolean, color } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; @@ -18,12 +17,26 @@ import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '.. export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -33,15 +46,6 @@ export const Example = () => ( }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - linkLabel: { - maximumSection: Infinity, - textColor: boolean('custom linkLabel.textColor', true) - ? color('linkLabel.textColor', 'rgba(0, 0, 0, 1)') - : undefined, - }, - }} /> ); diff --git a/storybook/stories/sunburst/25_no_labels.story.tsx b/storybook/stories/sunburst/25_no_labels.story.tsx index aa704fb14e..72bc7882af 100644 --- a/storybook/stories/sunburst/25_no_labels.story.tsx +++ b/storybook/stories/sunburst/25_no_labels.story.tsx @@ -8,8 +8,7 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; @@ -17,12 +16,21 @@ import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '.. export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -32,10 +40,6 @@ export const Example = () => ( }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - linkLabel: { maximumSection: Infinity, maxCount: 0 }, - }} /> ); diff --git a/storybook/stories/sunburst/26_percentage.story.tsx b/storybook/stories/sunburst/26_percentage.story.tsx index 263b94f009..eb1856495a 100644 --- a/storybook/stories/sunburst/26_percentage.story.tsx +++ b/storybook/stories/sunburst/26_percentage.story.tsx @@ -8,8 +8,16 @@ import React from 'react'; -import { Chart, Datum, MODEL_KEY, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { + Chart, + Datum, + MODEL_KEY, + Partition, + PartitionLayout, + Settings, + PartialTheme, + defaultPartitionValueFormatter, +} from '@elastic/charts'; import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; @@ -22,15 +30,41 @@ import { regionLookup, } from '../utils/utils'; +const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + linkLabel: { + maxCount: 0, + fontSize: 14, + }, + fontFamily: 'Arial', + fillLabel: { + fontStyle: 'italic', + fontWeight: 900, + valueFont: { + fontFamily: 'Menlo', + fontStyle: 'normal', + fontWeight: 100, + }, + }, + minFontSize: 1, + idealFontSizeJump: 1.1, + outerSizeRatio: 1, + emptySizeRatio: 0, + circlePadding: 4, + }, +}; + export const Example = () => ( - + d.exportVal as number} valueGetter="percent" - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} percentFormatter={(d: number) => `${Math.round((d + Number.EPSILON) * 100) / 100}%`} layers={[ { @@ -56,30 +90,6 @@ export const Example = () => ( }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - linkLabel: { - maxCount: 0, - fontSize: 14, - }, - fontFamily: 'Arial', - fillLabel: { - fontStyle: 'italic', - fontWeight: 900, - valueFont: { - fontFamily: 'Menlo', - fontStyle: 'normal', - fontWeight: 100, - }, - }, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - minFontSize: 1, - idealFontSizeJump: 1.1, - outerSizeRatio: 1, - emptySizeRatio: 0, - circlePadding: 4, - backgroundColor: 'rgba(229,229,229,1)', - }} /> ); diff --git a/storybook/stories/sunburst/27_heterogeneous_depth.story.tsx b/storybook/stories/sunburst/27_heterogeneous_depth.story.tsx index 3619a489cb..5260bb187e 100644 --- a/storybook/stories/sunburst/27_heterogeneous_depth.story.tsx +++ b/storybook/stories/sunburst/27_heterogeneous_depth.story.tsx @@ -8,8 +8,16 @@ import React from 'react'; -import { Chart, Datum, MODEL_KEY, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { + Chart, + Datum, + MODEL_KEY, + Partition, + PartitionLayout, + Settings, + PartialTheme, + defaultPartitionValueFormatter, +} from '@elastic/charts'; import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types'; import { PrimitiveValue } from '@elastic/charts/src/chart_types/partition_chart/layout/utils/group_by_rollup'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; @@ -23,14 +31,40 @@ import { regionLookup, } from '../utils/utils'; +const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + linkLabel: { + maxCount: 0, + fontSize: 14, + }, + fontFamily: 'Arial', + fillLabel: { + fontStyle: 'italic', + fontWeight: 900, + valueFont: { + fontFamily: 'Menlo', + fontStyle: 'normal', + fontWeight: 100, + }, + }, + minFontSize: 1, + idealFontSizeJump: 1.1, + outerSizeRatio: 1, + emptySizeRatio: 0, + circlePadding: 4, + }, +}; + export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -56,31 +90,6 @@ export const Example = () => ( }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - linkLabel: { - maxCount: 0, - fontSize: 14, - }, - fontFamily: 'Arial', - fillLabel: { - valueFormatter: (d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, - fontStyle: 'italic', - fontWeight: 900, - valueFont: { - fontFamily: 'Menlo', - fontStyle: 'normal', - fontWeight: 100, - }, - }, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - minFontSize: 1, - idealFontSizeJump: 1.1, - outerSizeRatio: 1, - emptySizeRatio: 0, - circlePadding: 4, - backgroundColor: 'rgba(229,229,229,1)', - }} /> ); diff --git a/storybook/stories/sunburst/28_not_a_number.story.tsx b/storybook/stories/sunburst/28_not_a_number.story.tsx index 8de3a4af9b..27eccf0830 100644 --- a/storybook/stories/sunburst/28_not_a_number.story.tsx +++ b/storybook/stories/sunburst/28_not_a_number.story.tsx @@ -8,8 +8,7 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; @@ -17,15 +16,21 @@ import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '.. export const Example = () => ( - + ({ ...s, exportVal: (undefined as unknown) as number }))) .concat(mocks.pie.slice(3))} + layout={PartitionLayout.sunburst} valueAccessor={(d: Datum) => d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -35,7 +40,6 @@ export const Example = () => ( }, }, ]} - config={{ partitionLayout: PartitionLayout.sunburst }} /> ); diff --git a/storybook/stories/sunburst/29_custom_stroke.story.tsx b/storybook/stories/sunburst/29_custom_stroke.story.tsx index 8d7626a8ce..7953835e29 100644 --- a/storybook/stories/sunburst/29_custom_stroke.story.tsx +++ b/storybook/stories/sunburst/29_custom_stroke.story.tsx @@ -6,45 +6,65 @@ * Side Public License, v 1. */ -import { color } from '@storybook/addon-knobs'; +import { boolean, color } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, Datum, PartialTheme, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { + Chart, + Datum, + PartialTheme, + Partition, + PartitionLayout, + Settings, + defaultPartitionValueFormatter, + Color, +} from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; import { countryLookup, indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils'; +const getColorKnob = (prop: string, defaultColor: Color) => + boolean(`custom ${prop}`, false) ? color(prop, defaultColor) : undefined; + export const Example = () => { - const partialCustomTheme: PartialTheme = { + const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, background: { - color: color('Change background container color', '#1c1c24'), + color: color('background.color', '#1c1c24'), + fallbackColor: getColorKnob('background.fallbackColor', 'black'), + }, + partition: { + linkLabel: { + maxCount: 15, + textColor: getColorKnob('linkLabel.textColor', 'white'), + }, + fillLabel: { + textColor: getColorKnob('fillLabel.textColor', 'white'), + }, + sectorLineWidth: 1.2, }, }; + + const fillColor = getColorKnob('shape.fillColor', 'blue'); return ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.origin, nodeLabel: (d: Datum) => countryLookup[d].name, shape: { - fillColor: indexInterpolatedFillColor(interpolatorCET2s), + fillColor: fillColor ?? indexInterpolatedFillColor(interpolatorCET2s), }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - linkLabel: { maxCount: 15, textColor: 'white' }, - sectorLineStroke: 'rgb(26, 27, 32)', // same as the dark theme - sectorLineWidth: 1.2, - }} /> ); @@ -52,5 +72,5 @@ export const Example = () => { Example.parameters = { theme: { default: 'dark' }, - backgrounds: { disable: true }, + background: { disable: true }, }; diff --git a/storybook/stories/sunburst/2_value_formatted.story.tsx b/storybook/stories/sunburst/2_value_formatted.story.tsx index 212273ff72..f452845492 100644 --- a/storybook/stories/sunburst/2_value_formatted.story.tsx +++ b/storybook/stories/sunburst/2_value_formatted.story.tsx @@ -10,8 +10,7 @@ import { action } from '@storybook/addon-actions'; import { boolean, number } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, Datum, Partition, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, Settings, PartialTheme, defaultPartitionValueFormatter } from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; @@ -20,10 +19,22 @@ import { indexInterpolatedFillColor, interpolatorTurbo, productLookup } from '.. export const Example = () => { const onElementClick = boolean('onElementClick listener', true); const onElementOver = boolean('onElementOver listener', true); + const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + outerSizeRatio: 0.9, + linkLabel: { + fontStyle: 'italic', + valueFont: { fontWeight: 900 }, + maxTextLength: number('maxTextLength', 20, { range: true, min: 1, max: 100 }), + }, + }, + }; return ( { id="spec_1" data={mocks.pie} valueAccessor={(d: Datum) => d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -51,14 +62,6 @@ export const Example = () => { }, }, ]} - config={{ - outerSizeRatio: 0.9, - linkLabel: { - fontStyle: 'italic', - valueFont: { fontWeight: 900 }, - maxTextLength: number('maxTextLength', 20, { range: true, min: 1, max: 100 }), - }, - }} /> ); diff --git a/storybook/stories/sunburst/30_largest_circle.story.tsx b/storybook/stories/sunburst/30_largest_circle.story.tsx index bbd4184929..c37db4067e 100644 --- a/storybook/stories/sunburst/30_largest_circle.story.tsx +++ b/storybook/stories/sunburst/30_largest_circle.story.tsx @@ -6,39 +6,53 @@ * Side Public License, v 1. */ +import { color } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { + Chart, + Datum, + Partition, + PartitionLayout, + Settings, + PartialTheme, + defaultPartitionValueFormatter, +} from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils'; -export const Example = () => ( - - - d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} - layers={[ - { - groupByRollup: (d: Datum) => d.sitc1, - nodeLabel: (d: Datum) => productLookup[d].name, - shape: { - fillColor: indexInterpolatedFillColor(interpolatorCET2s), +export const Example = () => { + const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + linkLabel: { maximumSection: Infinity, maxCount: 0 }, + sectorLineWidth: 10, + sectorLineStroke: color('sectorLineStroke', 'lightgrey'), + outerSizeRatio: 1, + }, + }; + + return ( + + + d.exportVal as number} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + layers={[ + { + groupByRollup: (d: Datum) => d.sitc1, + nodeLabel: (d: Datum) => productLookup[d].name, + shape: { + fillColor: indexInterpolatedFillColor(interpolatorCET2s), + }, }, - }, - ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - linkLabel: { maximumSection: Infinity, maxCount: 0 }, - sectorLineWidth: 10, - sectorLineStroke: 'lightgrey', - outerSizeRatio: 1, - }} - /> - -); + ]} + /> + + ); +}; diff --git a/storybook/stories/sunburst/31_bold_link_value.story.tsx b/storybook/stories/sunburst/31_bold_link_value.story.tsx index 6dea62809e..97b2ad9573 100644 --- a/storybook/stories/sunburst/31_bold_link_value.story.tsx +++ b/storybook/stories/sunburst/31_bold_link_value.story.tsx @@ -8,21 +8,27 @@ import React from 'react'; -import { Chart, Datum, Partition, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, Settings, PartialTheme, defaultPartitionValueFormatter } from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils'; +const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + linkLabel: { valueFont: { fontWeight: 900, fontStyle: 'italic' } }, + }, +}; + export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -33,7 +39,6 @@ export const Example = () => ( }, }, ]} - config={{ linkLabel: { valueFont: { fontWeight: 900, fontStyle: 'italic' } } }} /> ); diff --git a/storybook/stories/sunburst/32_custom_tooltip.story.tsx b/storybook/stories/sunburst/32_custom_tooltip.story.tsx index 296e557794..cf8ad7ac1b 100644 --- a/storybook/stories/sunburst/32_custom_tooltip.story.tsx +++ b/storybook/stories/sunburst/32_custom_tooltip.story.tsx @@ -9,8 +9,16 @@ import { boolean } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings, CustomTooltip as CT } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { + Chart, + Datum, + Partition, + PartitionLayout, + Settings, + CustomTooltip as CT, + PartialTheme, + defaultPartitionValueFormatter, +} from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; @@ -32,6 +40,25 @@ const CustomTooltip: CT = ({ values }) => ( ); +const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + linkLabel: { + maxCount: 0, + fontSize: 14, + }, + fontFamily: 'Arial', + fillLabel: { + fontStyle: 'italic', + }, + minFontSize: 1, + idealFontSizeJump: 1.1, + outerSizeRatio: 0.95, + emptySizeRatio: 0, + circlePadding: 4, + }, +}; + export const Example = () => { const tooltipOptions = { placement: getPlacementKnob('Tooltip placement'), @@ -41,12 +68,13 @@ export const Example = () => { }; return ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => countryLookup[d.dest].continentCountry.slice(0, 2), @@ -54,7 +82,7 @@ export const Example = () => { fillLabel: { fontFamily: 'Impact', valueFormatter: (d: number) => - `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000000))}\u00A0Tn`, + `$${defaultPartitionValueFormatter(Math.round(d / 1000000000000))}\u00A0Tn`, }, shape: { fillColor: (d) => @@ -72,25 +100,6 @@ export const Example = () => { }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - linkLabel: { - maxCount: 0, - fontSize: 14, - }, - fontFamily: 'Arial', - fillLabel: { - valueFormatter: (d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, - fontStyle: 'italic', - }, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - minFontSize: 1, - idealFontSizeJump: 1.1, - outerSizeRatio: 0.95, - emptySizeRatio: 0, - circlePadding: 4, - backgroundColor: 'rgba(229,229,229,1)', - }} /> ); diff --git a/storybook/stories/sunburst/33_ordered_slices.story.tsx b/storybook/stories/sunburst/33_ordered_slices.story.tsx index b4894a48ed..a31bcdac9b 100644 --- a/storybook/stories/sunburst/33_ordered_slices.story.tsx +++ b/storybook/stories/sunburst/33_ordered_slices.story.tsx @@ -18,8 +18,8 @@ import { Partition, Settings, ShapeTreeNode, + defaultPartitionValueFormatter, } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; import { useBaseTheme } from '../../use_base_theme'; import { discreteColor, countryLookup, colorBrewerCategoricalPastel12B } from '../utils/utils'; @@ -56,18 +56,24 @@ const sortPredicate = ([name1, node1]: ArrayEntry, [name2, node2]: ArrayEntry) = export const Example = () => { return ( - + d.exportVal as AdditiveNumber} - valueFormatter={(d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}`} + valueFormatter={(d: number) => `${defaultPartitionValueFormatter(Math.round(d / 1000000000))}`} layers={[ { groupByRollup: (d: Datum) => d.region, nodeLabel: (d: any) => d, fillLabel: { - valueFormatter: (d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}`, + valueFormatter: (d: number) => `${defaultPartitionValueFormatter(Math.round(d / 1000000000))}`, fontWeight: 600, fontStyle: 'italic', valueFont: { @@ -99,7 +105,8 @@ export const Example = () => { }, }, ]} - config={{ outerSizeRatio: 0.96, specialFirstInnermostSector: false, clockwiseSectors: true }} + clockwiseSectors + specialFirstInnermostSector={false} /> ); diff --git a/storybook/stories/sunburst/3_value_formatted_2.story.tsx b/storybook/stories/sunburst/3_value_formatted_2.story.tsx index bc099a076d..130e0ab4b9 100644 --- a/storybook/stories/sunburst/3_value_formatted_2.story.tsx +++ b/storybook/stories/sunburst/3_value_formatted_2.story.tsx @@ -8,8 +8,7 @@ import React from 'react'; -import { Chart, Datum, Partition, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; @@ -18,12 +17,18 @@ import { discreteColor, colorBrewerCategoricalPastel12, productLookup } from '.. export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -42,7 +47,6 @@ export const Example = () => ( }, }, ]} - config={{ outerSizeRatio: 0.9 }} /> ); diff --git a/storybook/stories/sunburst/4_fill_labels.story.tsx b/storybook/stories/sunburst/4_fill_labels.story.tsx index f23c43531d..fc087fe1fd 100644 --- a/storybook/stories/sunburst/4_fill_labels.story.tsx +++ b/storybook/stories/sunburst/4_fill_labels.story.tsx @@ -8,21 +8,48 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { + Chart, + Datum, + PartialTheme, + Partition, + PartitionLayout, + Settings, + defaultPartitionValueFormatter, +} from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils'; +const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + linkLabel: { + maxCount: 32, + fontSize: 14, + }, + fontFamily: 'Arial', + fillLabel: { + fontStyle: 'italic', + }, + minFontSize: 1, + idealFontSizeJump: 1.1, + outerSizeRatio: 0.9, + emptySizeRatio: 0, + circlePadding: 4, + }, +}; + export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -32,25 +59,6 @@ export const Example = () => ( }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - linkLabel: { - maxCount: 32, - fontSize: 14, - }, - fontFamily: 'Arial', - fillLabel: { - valueFormatter: (d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, - fontStyle: 'italic', - }, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - minFontSize: 1, - idealFontSizeJump: 1.1, - outerSizeRatio: 0.9, // - 0.5 * Math.random(), - emptySizeRatio: 0, - circlePadding: 4, - backgroundColor: 'rgba(229,229,229,1)', - }} /> ); diff --git a/storybook/stories/sunburst/5_donut.story.tsx b/storybook/stories/sunburst/5_donut.story.tsx index 5eb417574c..0fdf900c57 100644 --- a/storybook/stories/sunburst/5_donut.story.tsx +++ b/storybook/stories/sunburst/5_donut.story.tsx @@ -8,21 +8,49 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { + Chart, + Datum, + Partition, + PartitionLayout, + Settings, + PartialTheme, + defaultPartitionValueFormatter, +} from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils'; +const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + chartPaddings: { left: 160 }, + partition: { + linkLabel: { + maxCount: 32, + fontSize: 14, + }, + fontFamily: 'Arial', + fillLabel: { + fontStyle: 'italic', + }, + minFontSize: 1, + idealFontSizeJump: 1.1, + outerSizeRatio: 0.9, + emptySizeRatio: 0.4, + circlePadding: 4, + }, +}; + export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -32,25 +60,6 @@ export const Example = () => ( }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - linkLabel: { - maxCount: 32, - fontSize: 14, - }, - fontFamily: 'Arial', - fillLabel: { - valueFormatter: (d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, - fontStyle: 'italic', - }, - margin: { top: 0, bottom: 0, left: 0.2, right: 0 }, - minFontSize: 1, - idealFontSizeJump: 1.1, - outerSizeRatio: 0.9, // - 0.5 * Math.random(), - emptySizeRatio: 0.4, - circlePadding: 4, - backgroundColor: 'rgba(229,229,229,1)', - }} /> ); diff --git a/storybook/stories/sunburst/6_pie_chart_labels.story.tsx b/storybook/stories/sunburst/6_pie_chart_labels.story.tsx index 54124f3ca1..88a87d5167 100644 --- a/storybook/stories/sunburst/6_pie_chart_labels.story.tsx +++ b/storybook/stories/sunburst/6_pie_chart_labels.story.tsx @@ -8,23 +8,28 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; import { indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils'; export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d))}`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d))}`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -34,7 +39,6 @@ export const Example = () => ( }, }, ]} - config={{ partitionLayout: PartitionLayout.sunburst }} /> ); diff --git a/storybook/stories/sunburst/6_pie_chart_linked_labels.story.tsx b/storybook/stories/sunburst/6_pie_chart_linked_labels.story.tsx index cf1aade9c1..ad2c538567 100644 --- a/storybook/stories/sunburst/6_pie_chart_linked_labels.story.tsx +++ b/storybook/stories/sunburst/6_pie_chart_linked_labels.story.tsx @@ -8,33 +8,37 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { useBaseTheme } from '../../use_base_theme'; import { indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils'; export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d))}`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d))}`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, - // nodeLabel: (d: Datum) => d, shape: { fillColor: indexInterpolatedFillColor(interpolatorCET2s), }, }, ]} - config={{ partitionLayout: PartitionLayout.sunburst, linkLabel: { maximumSection: 10000 } }} /> ); diff --git a/storybook/stories/sunburst/7_zero_slice.story.tsx b/storybook/stories/sunburst/7_zero_slice.story.tsx index 1dcccdc1d0..967f9118ab 100644 --- a/storybook/stories/sunburst/7_zero_slice.story.tsx +++ b/storybook/stories/sunburst/7_zero_slice.story.tsx @@ -8,8 +8,7 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; @@ -17,15 +16,22 @@ import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '.. export const Example = () => ( - + ({ ...s, exportVal: 0 }))) .concat(mocks.pie.slice(4))} + layout={PartitionLayout.sunburst} valueAccessor={(d: Datum) => d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -35,7 +41,6 @@ export const Example = () => ( }, }, ]} - config={{ partitionLayout: PartitionLayout.sunburst, margin: { left: 0.2 } }} /> ); diff --git a/storybook/stories/sunburst/8_sunburst_two_layers.story.tsx b/storybook/stories/sunburst/8_sunburst_two_layers.story.tsx index cf2701d08a..b25160aabe 100644 --- a/storybook/stories/sunburst/8_sunburst_two_layers.story.tsx +++ b/storybook/stories/sunburst/8_sunburst_two_layers.story.tsx @@ -9,23 +9,50 @@ import { boolean } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { + Chart, + Datum, + Partition, + PartitionLayout, + Settings, + PartialTheme, + defaultPartitionValueFormatter, +} from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { useBaseTheme } from '../../use_base_theme'; import { countryLookup, indexInterpolatedFillColor, interpolatorCET2s, regionLookup } from '../utils/utils'; +const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + linkLabel: { + maxCount: 0, + fontSize: 14, + }, + fontFamily: 'Arial', + fillLabel: { + fontStyle: 'italic', + }, + minFontSize: 1, + idealFontSizeJump: 1.1, + outerSizeRatio: 0.95, + emptySizeRatio: 0, + circlePadding: 4, + }, +}; + export const Example = () => { const showDebug = boolean('show table for debugging', false); return ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => countryLookup[d.dest].continentCountry.slice(0, 2), @@ -33,7 +60,7 @@ export const Example = () => { fillLabel: { fontFamily: 'Impact', valueFormatter: (d: number) => - `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000000))}\u00A0Tn`, + `$${defaultPartitionValueFormatter(Math.round(d / 1000000000000))}\u00A0Tn`, }, shape: { fillColor: (d) => @@ -51,25 +78,6 @@ export const Example = () => { }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - linkLabel: { - maxCount: 0, - fontSize: 14, - }, - fontFamily: 'Arial', - fillLabel: { - valueFormatter: (d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, - fontStyle: 'italic', - }, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - minFontSize: 1, - idealFontSizeJump: 1.1, - outerSizeRatio: 0.95, - emptySizeRatio: 0, - circlePadding: 4, - backgroundColor: 'rgba(229,229,229,1)', - }} /> ); diff --git a/storybook/stories/sunburst/9_sunburst_three_layers.story.tsx b/storybook/stories/sunburst/9_sunburst_three_layers.story.tsx index ef6dee79f7..36ac5a7819 100644 --- a/storybook/stories/sunburst/9_sunburst_three_layers.story.tsx +++ b/storybook/stories/sunburst/9_sunburst_three_layers.story.tsx @@ -9,8 +9,16 @@ import { boolean } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, Datum, MODEL_KEY, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { + Chart, + Datum, + MODEL_KEY, + Partition, + PartitionLayout, + Settings, + PartialTheme, + defaultPartitionValueFormatter, +} from '@elastic/charts'; import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; @@ -23,14 +31,40 @@ import { regionLookup, } from '../utils/utils'; +const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + linkLabel: { + maxCount: 0, + fontSize: 14, + }, + fontFamily: 'Arial', + fillLabel: { + fontStyle: 'italic', + fontWeight: 900, + valueFont: { + fontFamily: 'Menlo', + fontStyle: 'normal', + fontWeight: 100, + }, + }, + minFontSize: 1, + idealFontSizeJump: 1.1, + outerSizeRatio: 1, + emptySizeRatio: 0, + circlePadding: 4, + }, +}; + export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -58,31 +92,6 @@ export const Example = () => ( }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - linkLabel: { - maxCount: 0, - fontSize: 14, - }, - fontFamily: 'Arial', - fillLabel: { - valueFormatter: (d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, - fontStyle: 'italic', - fontWeight: 900, - valueFont: { - fontFamily: 'Menlo', - fontStyle: 'normal', - fontWeight: 100, - }, - }, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - minFontSize: 1, - idealFontSizeJump: 1.1, - outerSizeRatio: 1, - emptySizeRatio: 0, - circlePadding: 4, - backgroundColor: 'rgba(229,229,229,1)', - }} /> ); diff --git a/storybook/stories/test_cases/7_rtl_text.story.tsx b/storybook/stories/test_cases/7_rtl_text.story.tsx index a99aff1b71..c595a8a068 100644 --- a/storybook/stories/test_cases/7_rtl_text.story.tsx +++ b/storybook/stories/test_cases/7_rtl_text.story.tsx @@ -100,8 +100,10 @@ export const Example = () => { d.exportVal as number} valueFormatter={formatter} + clockwiseSectors={type === PartitionLayout.sunburst && boolean('clockwiseSectors', true)} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -114,10 +116,6 @@ export const Example = () => { }, }, ]} - config={{ - partitionLayout: type, - clockwiseSectors: type === PartitionLayout.sunburst && boolean('clockwiseSectors', true), - }} /> ); @@ -125,6 +123,13 @@ export const Example = () => { ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, nodeLabel: (d: any) => productLookup[d].name.toUpperCase(), fillLabel: { - valueFormatter: (d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, + valueFormatter: (d: number) => `${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, fontFamily: 'Helvetica', textColor: 'black', fontWeight: 900, @@ -58,7 +76,7 @@ export const Example = () => ( groupByRollup: (d: Datum) => countryLookup[d.dest].continentCountry.slice(0, 2), nodeLabel: (d: any) => regionLookup[d].regionName, fillLabel: { - valueFormatter: (d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, + valueFormatter: (d: number) => `${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, textColor: 'black', fontWeight: 200, fontStyle: 'normal', @@ -84,14 +102,6 @@ export const Example = () => ( fillLabel: { maximizeFontSize: boolean('Maximize font size layer 3', true) }, }, ]} - config={{ - partitionLayout: PartitionLayout.treemap, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - minFontSize: 4, - maxFontSize: 36, - idealFontSizeJump: 1.01, - outerSizeRatio: 1, - }} /> ); diff --git a/storybook/stories/treemap/1_one_layer.story.tsx b/storybook/stories/treemap/1_one_layer.story.tsx index 2bd9a8f9fd..684f571b55 100644 --- a/storybook/stories/treemap/1_one_layer.story.tsx +++ b/storybook/stories/treemap/1_one_layer.story.tsx @@ -8,8 +8,7 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { arrayToLookup, hueInterpolator } from '@elastic/charts/src/common/color_calcs'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { productDimension } from '@elastic/charts/src/mocks/hierarchical/dimension_codes'; @@ -19,34 +18,37 @@ import { useBaseTheme } from '../../use_base_theme'; const productLookup = arrayToLookup((d: Datum) => d.sitc1, productDimension); -// style calcs const interpolatorCET2s = hueInterpolator(palettes.CET2s.map(([r, g, b]) => [r, g, b, 0.7])); const defaultFillColor = (colorMaker: any) => (d: any, i: number, a: any[]) => colorMaker(i / (a.length + 1)); export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, nodeLabel: (d: Datum) => productLookup[d].name, fillLabel: { - valueFormatter: (d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, + valueFormatter: (d: number) => `${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, }, shape: { fillColor: defaultFillColor(interpolatorCET2s), }, }, ]} - config={{ - partitionLayout: PartitionLayout.treemap, - }} /> ); diff --git a/storybook/stories/treemap/2_one_layer_2.story.tsx b/storybook/stories/treemap/2_one_layer_2.story.tsx index 7db07f05e9..c3dd63eae8 100644 --- a/storybook/stories/treemap/2_one_layer_2.story.tsx +++ b/storybook/stories/treemap/2_one_layer_2.story.tsx @@ -9,8 +9,7 @@ import { boolean, color, select } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types'; import { arrayToLookup } from '@elastic/charts/src/common/color_calcs'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; @@ -21,44 +20,52 @@ import { discreteColor, colorBrewerCategoricalPastel12 } from '../utils/utils'; const productLookup = arrayToLookup((d: Datum) => d.sitc1, productDimension); -export const Example = () => ( - - - d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} - layers={[ - { - groupByRollup: (d: Datum) => d.sitc1, - nodeLabel: (d: Datum) => productLookup[d].name, - fillLabel: { - valueFormatter: (d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, - valueFont: { - fontWeight: 100, +export const Example = () => { + const layout = select( + 'partitionLayout', + { + Treemap: PartitionLayout.treemap, + Sunburst: PartitionLayout.sunburst, + }, + PartitionLayout.treemap, + ); + return ( + + discreteColor(colorBrewerCategoricalPastel12)(d.sortIndex), - }, - }, - ]} - config={{ - partitionLayout: select( - 'partitionLayout', + }} + /> + d.exportVal as number} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + layers={[ { - Treemap: PartitionLayout.treemap, - Sunburst: PartitionLayout.sunburst, + groupByRollup: (d: Datum) => d.sitc1, + nodeLabel: (d: Datum) => productLookup[d].name, + fillLabel: { + valueFormatter: (d: number) => `${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, + valueFont: { + fontWeight: 100, + }, + }, + shape: { + fillColor: (d: ShapeTreeNode) => discreteColor(colorBrewerCategoricalPastel12)(d.sortIndex), + }, }, - PartitionLayout.treemap, - ), - fillLabel: { - textColor: boolean('custom fillLabel.textColor', false) - ? color('fillLabel.textColor', 'rgba(0, 0, 0, 1)') - : undefined, - }, - }} - /> - -); + ]} + /> + + ); +}; diff --git a/storybook/stories/treemap/3_mid_two.story.tsx b/storybook/stories/treemap/3_mid_two.story.tsx index d0714234a4..c99b760ea5 100644 --- a/storybook/stories/treemap/3_mid_two.story.tsx +++ b/storybook/stories/treemap/3_mid_two.story.tsx @@ -8,8 +8,16 @@ import React from 'react'; -import { Chart, Datum, MODEL_KEY, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { + Chart, + Datum, + MODEL_KEY, + PartialTheme, + Partition, + PartitionLayout, + Settings, + defaultPartitionValueFormatter, +} from '@elastic/charts'; import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types'; import { arrayToLookup, hueInterpolator } from '@elastic/charts/src/common/color_calcs'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; @@ -23,20 +31,31 @@ const countryLookup = arrayToLookup((d: Datum) => d.country, countryDimension); const interpolatorTurbo = hueInterpolator(palettes.turbo.map(([r, g, b]) => [r, g, b, 0.7])); +const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + minFontSize: 4, + maxFontSize: 84, + idealFontSizeJump: 1.15, + outerSizeRatio: 1, + }, +}; + export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => countryLookup[d.dest].continentCountry.slice(0, 2), nodeLabel: (d: any) => regionLookup[d].regionName, fillLabel: { - valueFormatter: (d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, + valueFormatter: (d: number) => `${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, fontFamily: 'Helvetica', textColor: 'grey', }, @@ -46,7 +65,7 @@ export const Example = () => ( groupByRollup: (d: Datum) => d.dest, nodeLabel: (d: any) => countryLookup[d].name, fillLabel: { - valueFormatter: (d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, + valueFormatter: (d: number) => `${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, textColor: 'black', fontWeight: 200, fontStyle: 'normal', @@ -64,14 +83,6 @@ export const Example = () => ( }, }, ]} - config={{ - partitionLayout: PartitionLayout.treemap, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - minFontSize: 4, - maxFontSize: 84, - idealFontSizeJump: 1.15, - outerSizeRatio: 1, - }} /> ); diff --git a/storybook/stories/treemap/4_two_layer_stress.story.tsx b/storybook/stories/treemap/4_two_layer_stress.story.tsx index 01c3eea80b..57661960aa 100644 --- a/storybook/stories/treemap/4_two_layer_stress.story.tsx +++ b/storybook/stories/treemap/4_two_layer_stress.story.tsx @@ -8,8 +8,16 @@ import React from 'react'; -import { Chart, Datum, MODEL_KEY, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { + Chart, + Datum, + MODEL_KEY, + PartialTheme, + Partition, + PartitionLayout, + Settings, + defaultPartitionValueFormatter, +} from '@elastic/charts'; import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types'; import { arrayToLookup, hueInterpolator } from '@elastic/charts/src/common/color_calcs'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; @@ -23,14 +31,25 @@ const countryLookup = arrayToLookup((d: Datum) => d.country, countryDimension); const interpolatorTurbo = hueInterpolator(palettes.turbo.map(([r, g, b]) => [r, g, b, 0.7])); +const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + minFontSize: 4, + maxFontSize: 84, + idealFontSizeJump: 1.05, + outerSizeRatio: 1, + }, +}; + export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -48,7 +67,7 @@ export const Example = () => ( groupByRollup: (d: Datum) => d.dest, nodeLabel: (d: any) => countryLookup[d].name, fillLabel: { - valueFormatter: (d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, + valueFormatter: (d: number) => `${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, textColor: 'black', fontWeight: 100, fontStyle: 'normal', @@ -68,14 +87,6 @@ export const Example = () => ( }, }, ]} - config={{ - partitionLayout: PartitionLayout.treemap, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - minFontSize: 4, - maxFontSize: 84, - idealFontSizeJump: 1.05, - outerSizeRatio: 1, - }} /> ); diff --git a/storybook/stories/treemap/5_multicolor.story.tsx b/storybook/stories/treemap/5_multicolor.story.tsx index bc4d269dad..7cd00212ae 100644 --- a/storybook/stories/treemap/5_multicolor.story.tsx +++ b/storybook/stories/treemap/5_multicolor.story.tsx @@ -8,8 +8,16 @@ import React from 'react'; -import { Chart, Datum, MODEL_KEY, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { + Chart, + Datum, + MODEL_KEY, + PartialTheme, + Partition, + PartitionLayout, + Settings, + defaultPartitionValueFormatter, +} from '@elastic/charts'; import { arrayToLookup, hueInterpolator } from '@elastic/charts/src/common/color_calcs'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { countryDimension } from '@elastic/charts/src/mocks/hierarchical/dimension_codes'; @@ -20,7 +28,6 @@ import { regionLookup } from '../utils/utils'; const countryLookup = arrayToLookup((d: Datum) => d.country, countryDimension); -// style calcs const interpolatorCET2s = hueInterpolator(palettes.CET2s.map(([r, g, b]) => [r, g, b, 0.7])); const defaultFillColor = (colorMaker: any) => ({ [MODEL_KEY]: model }: any) => { @@ -29,20 +36,25 @@ const defaultFillColor = (colorMaker: any) => ({ [MODEL_KEY]: model }: any) => { return colorMaker(model.sortIndex / (siblingCountLayer1 + 1)); }; +const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + minFontSize: 4, + maxFontSize: 84, + idealFontSizeJump: 1.05, + outerSizeRatio: 1, + }, +}; + export const Example = () => ( - - + + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} topGroove={0} layers={[ { @@ -60,7 +72,7 @@ export const Example = () => ( groupByRollup: (d: Datum) => d.dest, nodeLabel: (d: any) => countryLookup[d].name, fillLabel: { - valueFormatter: (d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, + valueFormatter: (d: number) => `${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, textColor: 'rgba(60,60,60,1)', fontWeight: 100, fontStyle: 'normal', @@ -72,14 +84,6 @@ export const Example = () => ( }, }, ]} - config={{ - partitionLayout: PartitionLayout.treemap, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - minFontSize: 4, - maxFontSize: 84, - idealFontSizeJump: 1.05, - outerSizeRatio: 1, - }} /> ); diff --git a/storybook/stories/treemap/6_custom_style.story.tsx b/storybook/stories/treemap/6_custom_style.story.tsx index 9b22b26b70..224fd419da 100644 --- a/storybook/stories/treemap/6_custom_style.story.tsx +++ b/storybook/stories/treemap/6_custom_style.story.tsx @@ -8,8 +8,16 @@ import React from 'react'; -import { Chart, Datum, MODEL_KEY, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { + Chart, + Datum, + MODEL_KEY, + PartialTheme, + Partition, + PartitionLayout, + Settings, + defaultPartitionValueFormatter, +} from '@elastic/charts'; import { arrayToLookup } from '@elastic/charts/src/common/color_calcs'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { countryDimension } from '@elastic/charts/src/mocks/hierarchical/dimension_codes'; @@ -27,14 +35,25 @@ const fillColor = ({ [MODEL_KEY]: model }: any) => { return `rgb(${Math.round(255 * shade)},${Math.round(255 * shade)},${Math.round(255 * shade)})`; }; +const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + minFontSize: 8, + maxFontSize: 14, + idealFontSizeJump: 1.05, + outerSizeRatio: 1, + }, +}; + export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => countryLookup[d.dest].continentCountry.slice(0, 2), @@ -51,7 +70,7 @@ export const Example = () => ( groupByRollup: (d: Datum) => d.dest, nodeLabel: (d: any) => countryLookup[d].name, fillLabel: { - valueFormatter: (d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, + valueFormatter: (d: number) => `${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, textColor: 'rgba(60,60,60,1)', fontWeight: 600, fontStyle: 'normal', @@ -63,14 +82,6 @@ export const Example = () => ( }, }, ]} - config={{ - partitionLayout: PartitionLayout.treemap, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - minFontSize: 8, - maxFontSize: 14, - idealFontSizeJump: 1.05, - outerSizeRatio: 1, - }} /> ); diff --git a/storybook/stories/treemap/7_percentage.story.tsx b/storybook/stories/treemap/7_percentage.story.tsx index 6cee1cdfac..3dd503e333 100644 --- a/storybook/stories/treemap/7_percentage.story.tsx +++ b/storybook/stories/treemap/7_percentage.story.tsx @@ -8,8 +8,11 @@ import React from 'react'; -import { Chart, Datum, MODEL_KEY, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config, percentValueGetter } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, MODEL_KEY, Partition, PartitionLayout, Settings, PartialTheme } from '@elastic/charts'; +import { + defaultPartitionValueFormatter, + percentValueGetter, +} from '@elastic/charts/src/chart_types/partition_chart/layout/config'; import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types'; import { arrayToLookup, hueInterpolator } from '@elastic/charts/src/common/color_calcs'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; @@ -23,21 +26,26 @@ const countryLookup = arrayToLookup((d: Datum) => d.country, countryDimension); const interpolatorTurbo = hueInterpolator(palettes.turbo.map(([r, g, b]) => [r, g, b, 0.7])); +const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + minFontSize: 4, + maxFontSize: 84, + idealFontSizeJump: 1.15, + outerSizeRatio: 1, + }, +}; + export const Example = () => ( - - + + d.exportVal as number} + layout={PartitionLayout.treemap} valueGetter={percentValueGetter} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => countryLookup[d.dest].continentCountry.slice(0, 2), @@ -70,14 +78,6 @@ export const Example = () => ( }, }, ]} - config={{ - partitionLayout: PartitionLayout.treemap, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - minFontSize: 4, - maxFontSize: 84, - idealFontSizeJump: 1.15, - outerSizeRatio: 1, - }} /> ); diff --git a/storybook/stories/treemap/8_groove_text.story.tsx b/storybook/stories/treemap/8_groove_text.story.tsx index 508f19e949..c9d8627412 100644 --- a/storybook/stories/treemap/8_groove_text.story.tsx +++ b/storybook/stories/treemap/8_groove_text.story.tsx @@ -9,8 +9,16 @@ import { number } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, Datum, MODEL_KEY, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { + Chart, + Datum, + MODEL_KEY, + Partition, + PartitionLayout, + Settings, + PartialTheme, + defaultPartitionValueFormatter, +} from '@elastic/charts'; import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types'; import { arrayToLookup, hueInterpolator } from '@elastic/charts/src/common/color_calcs'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; @@ -24,14 +32,25 @@ const countryLookup = arrayToLookup((d: Datum) => d.country, countryDimension); const interpolatorTurbo = hueInterpolator(palettes.turbo.map(([r, g, b]) => [r, g, b, 0.7])); +const theme: PartialTheme = { + chartMargins: { top: 0, left: 0, bottom: 0, right: 0 }, + partition: { + minFontSize: 4, + maxFontSize: 114, + idealFontSizeJump: 1.01, + outerSizeRatio: 1, + }, +}; + export const Example = () => ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => countryLookup[d.dest].continentCountry.slice(0, 2), @@ -57,7 +76,7 @@ export const Example = () => ( groupByRollup: (d: Datum) => d.dest, nodeLabel: (d: any) => countryLookup[d].name, fillLabel: { - valueFormatter: (d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, + valueFormatter: (d: number) => `${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, textColor: 'black', fontWeight: 200, fontStyle: 'normal', @@ -83,14 +102,6 @@ export const Example = () => ( }, }, ]} - config={{ - partitionLayout: PartitionLayout.treemap, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - minFontSize: 4, - maxFontSize: 114, - idealFontSizeJump: 1.01, - outerSizeRatio: 1, - }} /> ); diff --git a/storybook/stories/treemap/9_zero_values.story.tsx b/storybook/stories/treemap/9_zero_values.story.tsx index cea218cf83..0c7c54b263 100644 --- a/storybook/stories/treemap/9_zero_values.story.tsx +++ b/storybook/stories/treemap/9_zero_values.story.tsx @@ -8,8 +8,7 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts'; import { arrayToLookup, hueInterpolator } from '@elastic/charts/src/common/color_calcs'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { productDimension } from '@elastic/charts/src/mocks/hierarchical/dimension_codes'; @@ -19,34 +18,36 @@ import { useBaseTheme } from '../../use_base_theme'; const productLookup = arrayToLookup((d: Datum) => d.sitc1, productDimension); -// style calcs const interpolatorCET2s = hueInterpolator(palettes.CET2s.map(([r, g, b]) => [r, g, b, 0.7])); const defaultFillColor = (colorMaker: any) => (d: any, i: number, a: any[]) => colorMaker(i / (a.length + 1)); export const Example = () => ( - + (i ? d : { ...d, exportVal: 0 }))} + layout={PartitionLayout.treemap} valueAccessor={(d: Datum) => d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, nodeLabel: (d: Datum) => productLookup[d].name, fillLabel: { - valueFormatter: (d: number) => `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, + valueFormatter: (d: number) => `${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, }, shape: { fillColor: defaultFillColor(interpolatorCET2s), }, }, ]} - config={{ - partitionLayout: PartitionLayout.treemap, - }} /> ); diff --git a/storybook/stories/utils/hierarchical_input_utils.tsx b/storybook/stories/utils/hierarchical_input_utils.tsx index 95eda9904b..e6e9e333ea 100644 --- a/storybook/stories/utils/hierarchical_input_utils.tsx +++ b/storybook/stories/utils/hierarchical_input_utils.tsx @@ -6,8 +6,7 @@ * Side Public License, v 1. */ -import { Datum, RecursivePartial } from '@elastic/charts'; -import { Config } from '@elastic/charts/src/chart_types/partition_chart/layout/types/config_types'; +import { Datum } from '@elastic/charts'; import { PrimitiveValue } from '@elastic/charts/src/chart_types/partition_chart/layout/utils/group_by_rollup'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; @@ -57,17 +56,3 @@ export const getLayerSpec = (color: [string, string, string][]) => fillColor: () => discreteColor(color, 0.8)(depth), }, })); - -/** @internal */ -export const config: RecursivePartial = { - fontFamily: 'Arial', - fillLabel: { - valueFormatter: (d: number) => d, - fontWeight: 500, - }, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - minFontSize: 5, - maxFontSize: 9, - idealFontSizeJump: 1.01, - backgroundColor: 'rgba(229,229,229,1)', -}; diff --git a/storybook/stories/waffle/1_simple.story.tsx b/storybook/stories/waffle/1_simple.story.tsx index 341ad7570a..f82c3dfa55 100644 --- a/storybook/stories/waffle/1_simple.story.tsx +++ b/storybook/stories/waffle/1_simple.story.tsx @@ -9,8 +9,15 @@ import { boolean } from '@storybook/addon-knobs'; import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout, Settings, ShapeTreeNode } from '@elastic/charts'; -import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config'; +import { + Chart, + Datum, + Partition, + PartitionLayout, + Settings, + ShapeTreeNode, + defaultPartitionValueFormatter, +} from '@elastic/charts'; import { mocks } from '@elastic/charts/src/mocks/hierarchical'; import { ArrayEntry } from '../../../packages/charts/src/chart_types/partition_chart/layout/utils/group_by_rollup'; @@ -24,12 +31,23 @@ export const Example = () => { const data = mocks.pie.slice(0, 4).sort(() => (Math.random() > 0.5 ? 1 : -1)); return ( - + d.exportVal as number} - valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} + valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`} layers={[ { groupByRollup: (d: Datum) => d.sitc1, @@ -44,10 +62,6 @@ export const Example = () => { : undefined, // the descending sort is applied by default }, ]} - config={{ - partitionLayout: PartitionLayout.waffle, - margin: { left: 0.2, right: 0.2, top: 0.2, bottom: 0.2 }, - }} /> ); diff --git a/storybook/style.scss b/storybook/style.scss index b7b7bdd6e8..e0b28165d7 100644 --- a/storybook/style.scss +++ b/storybook/style.scss @@ -29,6 +29,11 @@ html { .echChart { background: white !important; } + + .euiText { + // required to prevent inheriting from html + color: $euiTitleColor; + } } &.dark-theme { @@ -39,6 +44,11 @@ html { .echChart { background: black !important; } + + .euiText { + // required to prevent inheriting from html + color: $euiTitleColor; + } } &.eui { diff --git a/yarn.lock b/yarn.lock index 165a77396d..063b13bc97 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4060,53 +4060,45 @@ resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.6.tgz#9c70eb7e7e4abc1083c8edf7151d35a19e442c00" integrity sha512-PKTHVgMHnK5p+kcMWWNnZuoR7O19VmHiOujmVcyN50hya7qIdDb5vvsYC+dwLxApEXiABhLozq0dlIwFeS3yjg== -"@microsoft/api-documenter@^7.12.7": - version "7.12.7" - resolved "https://registry.yarnpkg.com/@microsoft/api-documenter/-/api-documenter-7.12.7.tgz#7b1742999bc083a237f78e658b3351e92012b3f7" - integrity sha512-GD3Z52yzDz8ZN3efB0mL2ogXLoL/I/cpoZmwLm8KiXL6o5g9K25fQ7HrFt4fvk9XTvcYX/EvZw4TBjrWz7cj5A== +"@microsoft/api-documenter@^7.13.54": + version "7.13.54" + resolved "https://registry.yarnpkg.com/@microsoft/api-documenter/-/api-documenter-7.13.54.tgz#d6eacf912250e57c36589650b84443868cdc2a09" + integrity sha512-Ar1e2xcQzGhl3W6z2I6a5cS+a5yXMbZP4cThzwrOR+Vc4rfgQnIQnuZWYPVKdU5UejCgLvUwc8LDMPisUleJQQ== dependencies: - "@microsoft/api-extractor-model" "7.12.2" - "@microsoft/tsdoc" "0.12.24" - "@rushstack/node-core-library" "3.36.0" - "@rushstack/ts-command-line" "4.7.8" + "@microsoft/api-extractor-model" "7.13.9" + "@microsoft/tsdoc" "0.13.2" + "@rushstack/node-core-library" "3.41.0" + "@rushstack/ts-command-line" "4.9.1" colors "~1.2.1" js-yaml "~3.13.1" resolve "~1.17.0" -"@microsoft/api-extractor-model@7.12.2": - version "7.12.2" - resolved "https://registry.yarnpkg.com/@microsoft/api-extractor-model/-/api-extractor-model-7.12.2.tgz#d48b35e8ed20643b1c19d7a4f80c90c42dc7d1d8" - integrity sha512-EU+U09Mj65zUH0qwPF4PFJiL6Y+PQQE/RRGEHEDGJJzab/mRQDpKOyrzSdb00xvcd/URehIHJqC55cY2Y4jGOA== - dependencies: - "@microsoft/tsdoc" "0.12.24" - "@rushstack/node-core-library" "3.36.0" - -"@microsoft/api-extractor-model@7.13.7": - version "7.13.7" - resolved "https://registry.yarnpkg.com/@microsoft/api-extractor-model/-/api-extractor-model-7.13.7.tgz#2ae0948cb7458b336694c458675717ef8a9dcc85" - integrity sha512-emwhcaSF/h3WdqBWps4UU0RtGOGzy53IsplxuoLwtCuMAx3namYvJSfUGa5ajGPBao4MCyRYGsMc3EZ6IdR8cQ== +"@microsoft/api-extractor-model@7.13.9": + version "7.13.9" + resolved "https://registry.yarnpkg.com/@microsoft/api-extractor-model/-/api-extractor-model-7.13.9.tgz#018fb37ac0147595832e13db17509f6adafbad9c" + integrity sha512-t/XKTr8MlHRWgDr1fkyCzTQRR5XICf/WzIFs8yw1JLU8Olw99M3by4/dtpOZNskfqoW+J8NwOxovduU2csi4Ww== dependencies: "@microsoft/tsdoc" "0.13.2" "@microsoft/tsdoc-config" "~0.15.2" - "@rushstack/node-core-library" "3.40.2" + "@rushstack/node-core-library" "3.41.0" -"@microsoft/api-extractor@^7.18.9": - version "7.18.9" - resolved "https://registry.yarnpkg.com/@microsoft/api-extractor/-/api-extractor-7.18.9.tgz#82f50f8791bfacd5e3dd5d9400cdb6d69a499249" - integrity sha512-N+fbG+6SwA1i6EW3iGRp/nAT8vQpRSDvZ1DzBUr8xIS7tNfJ0C75ndPPziUT8EmalhLixRnIw6Ncmur8AFELRg== +"@microsoft/api-extractor@^7.18.11": + version "7.18.11" + resolved "https://registry.yarnpkg.com/@microsoft/api-extractor/-/api-extractor-7.18.11.tgz#24910c2432362b09900b493a0713919b662cdb0f" + integrity sha512-WfN5MZry4TrF60OOcGadFDsGECF9JNKNT+8P/8crYAumAYQRitI2cUiQRlCWrgmFgCWNezsNZeI/2BggdnUqcg== dependencies: - "@microsoft/api-extractor-model" "7.13.7" + "@microsoft/api-extractor-model" "7.13.9" "@microsoft/tsdoc" "0.13.2" "@microsoft/tsdoc-config" "~0.15.2" - "@rushstack/node-core-library" "3.40.2" - "@rushstack/rig-package" "0.3.0" - "@rushstack/ts-command-line" "4.9.0" + "@rushstack/node-core-library" "3.41.0" + "@rushstack/rig-package" "0.3.1" + "@rushstack/ts-command-line" "4.9.1" colors "~1.2.1" lodash "~4.17.15" resolve "~1.17.0" semver "~7.3.0" source-map "~0.6.1" - typescript "~4.3.5" + typescript "~4.4.2" "@microsoft/tsdoc-config@~0.15.2": version "0.15.2" @@ -4118,11 +4110,6 @@ jju "~1.4.0" resolve "~1.19.0" -"@microsoft/tsdoc@0.12.24": - version "0.12.24" - resolved "https://registry.yarnpkg.com/@microsoft/tsdoc/-/tsdoc-0.12.24.tgz#30728e34ebc90351dd3aff4e18d038eed2c3e098" - integrity sha512-Mfmij13RUTmHEMi9vRUhMXD7rnGR2VvxeNYtaGtaJ4redwwjT4UXYJ+nzmVJF7hhd4pn/Fx5sncDKxMVFJSWPg== - "@microsoft/tsdoc@0.13.2": version "0.13.2" resolved "https://registry.yarnpkg.com/@microsoft/tsdoc/-/tsdoc-0.13.2.tgz#3b0efb6d3903bd49edb073696f60e90df08efb26" @@ -4495,12 +4482,12 @@ prop-types "^15.6.1" react-lifecycles-compat "^3.0.4" -"@rushstack/node-core-library@3.36.0": - version "3.36.0" - resolved "https://registry.yarnpkg.com/@rushstack/node-core-library/-/node-core-library-3.36.0.tgz#95dace39d763c8695d6607c421f95c6ac65b0ed4" - integrity sha512-bID2vzXpg8zweXdXgQkKToEdZwVrVCN9vE9viTRk58gqzYaTlz4fMId6V3ZfpXN6H0d319uGi2KDlm+lUEeqCg== +"@rushstack/node-core-library@3.41.0": + version "3.41.0" + resolved "https://registry.yarnpkg.com/@rushstack/node-core-library/-/node-core-library-3.41.0.tgz#36f79ecf1a3c9b417690d95bbfcdf40390bf5f51" + integrity sha512-JxdmqR+SHU04jTDaZhltMZL3/XTz2ZZM47DTN+FSPUGUVp6WmxLlvJnT5FoHrOZWUjL/FoIlZUdUPTSXjTjIcg== dependencies: - "@types/node" "10.17.13" + "@types/node" "12.20.24" colors "~1.2.1" fs-extra "~7.0.1" import-lazy "~4.0.0" @@ -4510,43 +4497,18 @@ timsort "~0.3.0" z-schema "~3.18.3" -"@rushstack/node-core-library@3.40.2": - version "3.40.2" - resolved "https://registry.yarnpkg.com/@rushstack/node-core-library/-/node-core-library-3.40.2.tgz#71d92180f14bafd212f720b2cfe8892e688159b6" - integrity sha512-wzcRucwnhOENTfx6hZ2M+CA1Zmp8Dr572mFFtjxmcQzBWTbNFRB1Mi1wLb7DLza+69OUBoSZcHUqydlwL+gvSA== - dependencies: - "@types/node" "10.17.13" - colors "~1.2.1" - fs-extra "~7.0.1" - import-lazy "~4.0.0" - jju "~1.4.0" - resolve "~1.17.0" - semver "~7.3.0" - timsort "~0.3.0" - z-schema "~3.18.3" - -"@rushstack/rig-package@0.3.0": - version "0.3.0" - resolved "https://registry.yarnpkg.com/@rushstack/rig-package/-/rig-package-0.3.0.tgz#334ad2846797861361b3445d4cc9ae9164b1885c" - integrity sha512-Lj6noF7Q4BBm1hKiBDw94e6uZvq1xlBwM/d2cBFaPqXeGdV+G6r3qaCWfRiSXK0pcHpGGpV5Tb2MdfhVcO6G/g== +"@rushstack/rig-package@0.3.1": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@rushstack/rig-package/-/rig-package-0.3.1.tgz#b70ab9ffe3b6347eb799f5c6c5b6f5882039a60f" + integrity sha512-DXQmrPWOCNoE2zPzHCShE1y47FlgbAg48wpaY058Qo/yKDzL0GlEGf5Ra2NIt22pMcp0R/HHh+kZGbqTnF4CrA== dependencies: resolve "~1.17.0" strip-json-comments "~3.1.1" -"@rushstack/ts-command-line@4.7.8": - version "4.7.8" - resolved "https://registry.yarnpkg.com/@rushstack/ts-command-line/-/ts-command-line-4.7.8.tgz#3aa77cf544c571be3206fc2bcba20c7a096ed254" - integrity sha512-8ghIWhkph7NnLCMDJtthpsb7TMOsVGXVDvmxjE/CeklTqjbbUFBjGXizJfpbEkRQTELuZQ2+vGn7sGwIWKN2uA== - dependencies: - "@types/argparse" "1.0.38" - argparse "~1.0.9" - colors "~1.2.1" - string-argv "~0.3.1" - -"@rushstack/ts-command-line@4.9.0": - version "4.9.0" - resolved "https://registry.yarnpkg.com/@rushstack/ts-command-line/-/ts-command-line-4.9.0.tgz#781ba42cff73cae097b6d5241b6441e7cc2fe6e0" - integrity sha512-kmT8t+JfnvphISF1C5WwY56RefjwgajhSjs9J4ckvAFXZDXR6F5cvF5/RTh7fGCzIomg8esy2PHO/b52zFoZvA== +"@rushstack/ts-command-line@4.9.1": + version "4.9.1" + resolved "https://registry.yarnpkg.com/@rushstack/ts-command-line/-/ts-command-line-4.9.1.tgz#9fe594a408c7ef1b67f57b41ba931ecd3f420e92" + integrity sha512-zzoWB6OqVbMjnxlxbAUqbZqDWITUSHqwFCx7JbH5CVrjR9kcsB4NeWkN1I8GcR92beiOGvO3yPlB2NRo5Ugh+A== dependencies: "@types/argparse" "1.0.38" argparse "~1.0.9" @@ -5918,10 +5880,10 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.7.tgz#01e4ea724d9e3bd50d90c11fd5980ba317d8fa11" integrity sha512-E6Zn0rffhgd130zbCbAr/JdXfXkoOUFAKNs/rF8qnafSJ8KYaA/j3oz7dcwal+lYjLA7xvdd5J4wdYpCTlP8+w== -"@types/node@10.17.13": - version "10.17.13" - resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.13.tgz#ccebcdb990bd6139cd16e84c39dc2fb1023ca90c" - integrity sha512-pMCcqU2zT4TjqYFrWtYHKal7Sl30Ims6ulZ4UFXxI4xbtQqK/qqKwkDoBFCfooRqqmRu9vY3xaJRwxSh673aYg== +"@types/node@12.20.24": + version "12.20.24" + resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.24.tgz#c37ac69cb2948afb4cef95f424fa0037971a9a5c" + integrity sha512-yxDeaQIAJlMav7fH5AQqPH1u8YIuhYJXYBzxaQ4PifsU0GDO38MSdmEDeRlIxrKbC6NbEaaEHDanWb+y30U8SQ== "@types/node@>= 8": version "14.14.20" @@ -22079,7 +22041,7 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@^4.4.3: +typescript@^4.4.3, typescript@~4.4.2: version "4.4.3" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.3.tgz#bdc5407caa2b109efd4f82fe130656f977a29324" integrity sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA== @@ -22089,11 +22051,6 @@ typescript@~3.9.7: resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa" integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw== -typescript@~4.3.5: - version "4.3.5" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4" - integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA== - uglify-js@^3.1.4: version "3.13.5" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.5.tgz#5d71d6dbba64cf441f32929b1efce7365bb4f113"