diff --git a/CHANGELOG.md b/CHANGELOG.md index 663af513473..707fba36df1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,12 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Update `createTheme` to apply latest changes to elastic charts `Theme`. ([#3792](https://github.com/elastic/eui/pull/3792)) - Added icons for `appSearchApp` and `workplaceSearchApp` to `EuiIcon` ([#3859](https://github.com/elastic/eui/pull/3859)) +**Breaking changes** + +- Requires `@elastic/charts` version `20.0.0` and above for chart theming utils. + ## [`27.4.0`](https://github.com/elastic/eui/tree/v27.4.0) - Added `customOptionText` prop to `EuiComboBox` ([#3811](https://github.com/elastic/eui/pull/3811)) diff --git a/package.json b/package.json index 73b7808632d..e882182bf5a 100644 --- a/package.json +++ b/package.json @@ -87,7 +87,7 @@ "@babel/preset-env": "^7.8.3", "@babel/preset-react": "^7.8.3", "@babel/preset-typescript": "^7.8.3", - "@elastic/charts": "^19.6.3", + "@elastic/charts": "^20.0.0", "@elastic/datemath": "^5.0.2", "@elastic/eslint-config-kibana": "^0.15.0", "@svgr/core": "5.0.1", diff --git a/src-docs/src/views/elastic_charts/category_chart.js b/src-docs/src/views/elastic_charts/category_chart.js index 3f07ee789bb..0506c808afd 100644 --- a/src-docs/src/views/elastic_charts/category_chart.js +++ b/src-docs/src/views/elastic_charts/category_chart.js @@ -100,14 +100,17 @@ export const CategoryChart = () => { splitSeriesAccessors={multi ? ['issueType'] : undefined} stackAccessors={stacked ? ['issueType'] : undefined} /> - + `${round(Number(d) / 1000, 2)}k` : undefined } - showGridLines /> @@ -193,10 +196,10 @@ export const CategoryChart = () => { `${round(Number(d) / 1000, 2)}k`}' : ''} /> diff --git a/src-docs/src/views/elastic_charts/sizes.js b/src-docs/src/views/elastic_charts/sizes.js index 429d6c6a310..17146fd9c28 100644 --- a/src-docs/src/views/elastic_charts/sizes.js +++ b/src-docs/src/views/elastic_charts/sizes.js @@ -87,9 +87,10 @@ export class Sizes extends Component { const data2 = TIME_DATA_2.slice(); let tooltipProps; let legendPosition = 'right'; + const xAxisFormatter = timeFormatter(niceTimeFormatByDay(1)); let xAxisTitle = `${formatDate(data1[0][0], dateFormatAliases.date)}`; - let xAxisFormatter = timeFormatter(niceTimeFormatByDay(1)); - let yAxisFormatter; + let xAxisStyle; + let yAxisStyle; let changeDescription = 'At full width, you should be able to display all the details you need; axes, tick labels and titles, and legends.'; @@ -113,7 +114,7 @@ export class Sizes extends Component { data1[0][0] ).format('H:mm')} - ${moment(data1[data1.length - 1][0]).format('H:mm')}`; - xAxisFormatter = () => {}; + xAxisStyle = { tickLabel: { visible: false } }; changeDescription = 'When the panel becomes narrower that the axes tick labels begin to get clustered, consider moving the axes range to the axes title.'; @@ -132,7 +133,7 @@ export class Sizes extends Component { } if (width < this.xsmallSize) { - yAxisFormatter = () => {}; + yAxisStyle = { tickLabel: { visible: false } }; changeDescription = 'At severely narrow panels, consider the key indicators of your data and call these out with annotations instead of displaying all values of all axes.'; @@ -145,7 +146,8 @@ export class Sizes extends Component { tooltipProps, xAxisTitle, xAxisFormatter, - yAxisFormatter, + xAxisStyle, + yAxisStyle, changeDescription, }); }; @@ -161,7 +163,8 @@ export class Sizes extends Component { legendPosition, xAxisTitle, xAxisFormatter, - yAxisFormatter, + xAxisStyle, + yAxisStyle, changeDescription, } = this.state; @@ -230,13 +233,10 @@ export class Sizes extends Component { tickFormat={xAxisFormatter} id="bottom-axis" position="bottom" + showGridLines={false} + style={xAxisStyle} /> - + @@ -328,20 +328,17 @@ export class Sizes extends Component { : '' } {}' - : 'timeFormatter(niceTimeFormatByDay(1))' - }} id="bottom-axis" position="bottom" + title={'${xAxisTitle}'} + tickFormat={timeFormatter(niceTimeFormatByDay(1))} + showGridLines={false} + style={${JSON.stringify(xAxisStyle)}} /> {}}' : ''} + style={${JSON.stringify(yAxisStyle)}} /> `}> {copy => ( diff --git a/src/components/common.ts b/src/components/common.ts index dc48900d686..7bf2037e7ac 100644 --- a/src/components/common.ts +++ b/src/components/common.ts @@ -194,12 +194,41 @@ export type PropsForButton = T & } & P; /** - * Makes all recursive keys optional + * Replaces all properties on any type as optional, includes nested types + * + * @example + * ```ts + * interface Person { + * name: string; + * age?: number; + * spouse: Person; + * children: Person[]; + * } + * type PartialPerson = RecursivePartial; + * // results in + * interface PartialPerson { + * name?: string; + * age?: number; + * spouse?: RecursivePartial; + * children?: RecursivePartial[] + * } + * ``` */ export type RecursivePartial = { - [P in keyof T]?: T[P] extends Array + [P in keyof T]?: T[P] extends NonAny[] // checks for nested any[] + ? T[P] + : T[P] extends readonly NonAny[] // checks for nested ReadonlyArray + ? T[P] + : T[P] extends Array ? Array> - : T[P] extends object - ? RecursivePartial - : T[P]; + : T[P] extends ReadonlyArray // eslint-disable-line @typescript-eslint/array-type + ? ReadonlyArray> // eslint-disable-line @typescript-eslint/array-type + : T[P] extends Set // checks for Sets + ? Set> + : T[P] extends Map // checks for Maps + ? Map> + : T[P] extends NonAny // checks for primative values + ? T[P] + : RecursivePartial; // recurse for all non-array and non-primative values }; +type NonAny = number | boolean | string | symbol | null; diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts index da7a33e1118..594e19c52a0 100644 --- a/src/themes/charts/themes.ts +++ b/src/themes/charts/themes.ts @@ -122,27 +122,33 @@ function createTheme(colors: any): EuiChartThemeType { histogramPadding: 0.05, }, axes: { - axisTitleStyle: { + axisTitle: { fontSize: 12, fontFamily: fontFamily, fill: colors.euiColorDarkestShade.rgba, - padding: 10, + padding: { + inner: 10, + outer: 0, + }, }, - axisLineStyle: { + axisLine: { stroke: colors.euiColorChartLines.rgba, }, - tickLabelStyle: { + tickLabel: { fontSize: 10, fontFamily: fontFamily, fill: colors.euiColorDarkShade.rgba, - padding: 8, + padding: { + outer: 8, + inner: 10, + }, }, - tickLineStyle: { + tickLine: { visible: false, stroke: colors.euiColorChartLines.rgba, strokeWidth: 1, }, - gridLineStyle: { + gridLine: { horizontal: { visible: true, stroke: colors.euiColorChartLines.rgba, diff --git a/yarn.lock b/yarn.lock index c6ab2058288..fb05249ee1c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1275,10 +1275,10 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" -"@elastic/charts@^19.6.3": - version "19.6.3" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-19.6.3.tgz#c23a1d7a8e245b1a800a3a4ef5fc4378b0da5e74" - integrity sha512-lB+rOODUKYZvsWCAcCxtAu8UxdZ2yIjZs+cjXwO1SlngY+jo+gc6XoEZG4kAczRPcr6cMdHesZ8LmFr3Enle5Q== +"@elastic/charts@^20.0.0": + version "20.0.2" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-20.0.2.tgz#e64bd11b75576e87e794c23b0bca2d0ead83149a" + integrity sha512-qPua1PcnYfSYEU9ql99BWw5NxqHWBkPFAxlqvA+4vaE4IxXR7IWwFHFgyJY9v1qnQrxc+lN2AWdETJbREPC1nA== dependencies: "@popperjs/core" "^2.4.0" chroma-js "^2.1.0"