import React from 'react' ; import { Chart , Datum , Partition , PartitionLayout , Settings , ShapeTreeNode } from '@elastic/charts' ; import { useBaseTheme } from '../../use_base_theme' ; import { colorBrewerCategoricalStark9 , discreteColor , productPriceLookup } from '../utils/utils' ; export const Example = ( ) => { return ( < Chart className = "story-chart" > < Settings theme = { { chartMargins : { top : 0 , left : 0 , bottom : 0 , right : 0 } , chartPaddings : { left : 170 , right : 170 , top : 70 , bottom : 70 } , } } baseTheme = { useBaseTheme ( ) } showLegend flatLegend showLegendExtra / > < Partition id = "spec_1" data = { [ { products_price : 0.0 , median_day_of_week_i : 13 } , { products_price : 50.0 , median_day_of_week_i : 3 } , { products_price : 100.0 , median_day_of_week_i : 4 } , { products_price : 150.0 , median_day_of_week_i : 3 } , { products_price : 200.0 , median_day_of_week_i : 4 } , { products_price : 350.0 , median_day_of_week_i : 0 } , { products_price : 400.0 , median_day_of_week_i : 0 } , { products_price : 1050.0 , median_day_of_week_i : 0 } , ] } layout = { PartitionLayout . waffle } valueAccessor = { ( d ) => d . median_day_of_week_i as number } layers = { [ { groupByRollup : ( d ) => d . products_price , nodeLabel : ( d ) => productPriceLookup [ d ] . name , shape : { fillColor : ( d ) => discreteColor ( colorBrewerCategoricalStark9 . slice ( 1 ) ) ( d . sortIndex ) , } , } , ] } / > < /Chart>); } ;