feat: plot matrix proof of concept

packages/charts/api/charts.api.md

@@ -524,6 +524,7 @@ export const ChartType: Readonly<{
     Goal: "goal";
     Partition: "partition";
     Flame: "flame";
+    PlotMatrix: "plot_matrix";
     Timeslip: "timeslip";
     XYAxis: "xy_axis";
     Heatmap: "heatmap";
@@ -2043,6 +2044,55 @@ export const Placement: Readonly<{
 // @public
 export type Placement = $Values<typeof Placement>;
 
+// Warning: (ae-forgotten-export) The symbol "buildProps_2" needs to be exported by the entry point index.d.ts
+//
+// @public
+export const PlotMatrix: (props: SFProps<PlotMatrixSpec, keyof (typeof buildProps_2)['overrides'], keyof (typeof buildProps_2)['defaults'], keyof (typeof buildProps_2)['optionals'], keyof (typeof buildProps_2)['requires']>) => null;
+
+// @public
+export interface PlotMatrixSpec extends Spec {
+    // (undocumented)
+    chartType: typeof ChartType.PlotMatrix;
+    // (undocumented)
+    columnarData: PlotMatrixViewModel;
+    // (undocumented)
+    specType: typeof SpecType.Series;
+}
+
+// @alpha (undocumented)
+export interface PlotMatrixStyle {
+    // (undocumented)
+    navigation: {
+        textColor: Color;
+        buttonTextColor: Color;
+        buttonDisabledTextColor: Color;
+        buttonBackgroundColor: Color;
+        buttonDisabledBackgroundColor: Color;
+    };
+    // (undocumented)
+    scrollbarThumb: Color;
+    // (undocumented)
+    scrollbarTrack: Color;
+}
+
+// @public
+export interface PlotMatrixViewModel {
+    // (undocumented)
+    color: Float32Array;
+    // (undocumented)
+    label: string[];
+    // (undocumented)
+    position0: Float32Array;
+    // (undocumented)
+    position1: Float32Array;
+    // (undocumented)
+    size0: Float32Array;
+    // (undocumented)
+    size1: Float32Array;
+    // (undocumented)
+    value: Float64Array;
+}
+
 // @public (undocumented)
 type PointerEvent_2 = PointerOverEvent | PointerOutEvent;
 export { PointerEvent_2 as PointerEvent }
@@ -2724,6 +2774,8 @@ export interface Theme {
     markSizeRatio?: number;
     metric: MetricStyle;
     partition: PartitionStyle;
+    // @alpha (undocumented)
+    plotMatrix: PlotMatrixStyle;
     // (undocumented)
     scales: ScalesConfig;
     // (undocumented)
@@ -2769,10 +2821,10 @@ export interface TimeScale {
     type: typeof ScaleType.Time;
 }
 
-// Warning: (ae-forgotten-export) The symbol "buildProps_2" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "buildProps_3" needs to be exported by the entry point index.d.ts
 //
 // @public
-export const Timeslip: (props: SFProps<TimeslipSpec, keyof (typeof buildProps_2)['overrides'], keyof (typeof buildProps_2)['defaults'], keyof (typeof buildProps_2)['optionals'], keyof (typeof buildProps_2)['requires']>) => null;
+export const Timeslip: (props: SFProps<TimeslipSpec, keyof (typeof buildProps_3)['overrides'], keyof (typeof buildProps_3)['defaults'], keyof (typeof buildProps_3)['optionals'], keyof (typeof buildProps_3)['requires']>) => null;
 
 // @public
 export interface TimeslipSpec extends Spec {

packages/charts/package.json

@@ -42,6 +42,7 @@
     "d3-interpolate": "^3.0.1",
     "d3-scale": "^3.3.0",
     "d3-shape": "^2.0.0",
+    "d3": "3.5.17",
     "prop-types": "^15.7.2",
     "re-reselect": "^3.4.0",
     "react-redux": "^7.1.0",

packages/charts/src/chart_types/index.ts

@@ -17,6 +17,7 @@ export const ChartType = Object.freeze({
   Goal: 'goal' as const,
   Partition: 'partition' as const,
   Flame: 'flame' as const,
+  PlotMatrix: 'plot_matrix' as const,
   Timeslip: 'timeslip' as const,
   XYAxis: 'xy_axis' as const,
   Heatmap: 'heatmap' as const,

packages/charts/src/chart_types/plot_matrix/internal_chart_state.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 { ChartType } from '..';
+import { DEFAULT_CSS_CURSOR } from '../../common/constants';
+import { LegendItemExtraValues } from '../../common/legend';
+import { SeriesKey } from '../../common/series_id';
+import { InternalChartState } from '../../state/chart_state';
+import { InitStatus } from '../../state/selectors/get_internal_is_intialized';
+import { PlotMatrix } from './plot_matrix';
+
+/** @internal */
+export class PlotMatrixState implements InternalChartState {
+  chartType = ChartType.PlotMatrix;
+  getChartTypeDescription = () => 'Plot matrix';
+  chartRenderer = PlotMatrix;
+
+  // default empty properties, unused in Plot matrix
+  eventCallbacks = () => {};
+  isInitialized = () => InitStatus.Initialized;
+  isBrushAvailable = () => false;
+  isBrushing = () => false;
+  isChartEmpty = () => false;
+  getLegendItemsLabels = () => [];
+  getLegendItems = () => [];
+  getLegendExtraValues = () => new Map<SeriesKey, LegendItemExtraValues>();
+  getPointerCursor = () => DEFAULT_CSS_CURSOR;
+  getTooltipAnchor = () => ({ x: 0, y: 0, width: 0, height: 0 });
+  isTooltipVisible = () => ({ visible: false, isExternal: false, displayOnly: false, isPinnable: false });
+  getTooltipInfo = () => ({ header: null, values: [] });
+  getProjectionContainerArea = () => ({ width: 0, height: 0, top: 0, left: 0 });
+  getMainProjectionArea = () => ({ width: 0, height: 0, top: 0, left: 0 });
+  getBrushArea = () => null;
+  getDebugState = () => ({});
+}

packages/charts/src/chart_types/plot_matrix/plom/colors.ts

@@ -0,0 +1,51 @@
+/*
+ * 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.
+ */
+
+const turboString = `30123b32154333184a341b51351e5836215f37246638276d392a733a2d793b2f803c32863d358b3e38913f3b973f3e9c40
+40a24143a74146ac4249b1424bb5434eba4351bf4454c34456c74559cb455ccf455ed34661d64664da4666dd4669e0466be3476ee64771e94773eb4
+776ee4778f0477bf2467df44680f64682f84685fa4687fb458afc458cfd448ffe4391fe4294ff4196ff4099ff3e9bfe3d9efe3ba0fd3aa3fc38a5fb
+37a8fa35abf833adf731aff52fb2f42eb4f22cb7f02ab9ee28bceb27bee925c0e723c3e422c5e220c7df1fc9dd1ecbda1ccdd81bd0d51ad2d21ad4d
+019d5cd18d7ca18d9c818dbc518ddc218dec018e0bd19e2bb19e3b91ae4b61ce6b41de7b21fe9af20eaac23ebaa25eca727eea42aefa12cf09e2ff1
+9b32f29835f39438f4913cf58e3ff68a43f78746f8844af8804ef97d52fa7a55fa7659fb735dfc6f61fc6c65fd6969fd666dfe6271fe5f75fe5c79f
+e597dff5680ff5384ff5188ff4e8bff4b8fff4992ff4796fe4499fe429cfe409ffd3fa1fd3da4fc3ca7fc3aa9fb39acfb38affa37b1f936b4f836b7
+f735b9f635bcf534bef434c1f334c3f134c6f034c8ef34cbed34cdec34d0ea34d2e935d4e735d7e535d9e436dbe236dde037dfdf37e1dd37e3db38e
+5d938e7d739e9d539ebd339ecd13aeecf3aefcd3af1cb3af2c93af4c73af5c53af6c33af7c13af8be39f9bc39faba39fbb838fbb637fcb336fcb136
+fdae35fdac34fea933fea732fea431fea130fe9e2ffe9b2dfe992cfe962bfe932afe9029fd8d27fd8a26fc8725fc8423fb8122fb7e21fa7b1ff9781
+ef9751df8721cf76f1af66c19f56918f46617f36315f26014f15d13f05b12ef5811ed5510ec530feb500eea4e0de84b0ce7490ce5470be4450ae243
+0ae14109df3f08dd3d08dc3a07da3907d83706d63506d43305d23105d02f05ce2d04cc2c04ca2a04c82803c52603c32503c12302be2102bc2002b91
+e02b71d02b41b01b21a01af1801ac1701a91601a71401a41301a112019e10019b0f01980e01950d01920b018e0a018b09028808028507028106027e
+05027a0403`.replace(/[\n\r]/g, '');
+
+const magmaString = `00000401000501010601010802010902020b02020d03030f03031204041405041606051806051a07061c08071e0907200a
+08220b09240c09260d0a290e0b2b100b2d110c2f120d31130d34140e36150e38160f3b180f3d19103f1a10421c10441d11471e114920114b21114e2
+2115024125325125527125829115a2a115c2c115f2d11612f116331116533106734106936106b38106c390f6e3b0f703d0f713f0f72400f74420f75
+440f764510774710784910784a10794c117a4e117b4f127b51127c52137c54137d56147d57157e59157e5a167e5c167f5d177f5f187f60188062198
+0641a80651a80671b80681c816a1c816b1d816d1d816e1e81701f81721f817320817521817621817822817922827b23827c23827e24828025828125
+818326818426818627818827818928818b29818c29818e2a81902a81912b81932b80942c80962c80982d80992d809b2e7f9c2e7f9e2f7fa02f7fa13
+07ea3307ea5317ea6317da8327daa337dab337cad347cae347bb0357bb2357bb3367ab5367ab73779b83779ba3878bc3978bd3977bf3a77c03a76c2
+3b75c43c75c53c74c73d73c83e73ca3e72cc3f71cd4071cf4070d0416fd2426fd3436ed5446dd6456cd8456cd9466bdb476adc4869de4968df4a68e
+04c67e24d66e34e65e44f64e55064e75263e85362e95462ea5661eb5760ec5860ed5a5fee5b5eef5d5ef05f5ef1605df2625df2645cf3655cf4675c
+f4695cf56b5cf66c5cf66e5cf7705cf7725cf8745cf8765cf9785df9795df97b5dfa7d5efa7f5efa815ffb835ffb8560fb8761fc8961fc8a62fc8c6
+3fc8e64fc9065fd9266fd9467fd9668fd9869fd9a6afd9b6bfe9d6cfe9f6dfea16efea36ffea571fea772fea973feaa74feac76feae77feb078feb2
+7afeb47bfeb67cfeb77efeb97ffebb81febd82febf84fec185fec287fec488fec68afec88cfeca8dfecc8ffecd90fecf92fed194fed395fed597fed
+799fed89afdda9cfddc9efddea0fde0a1fde2a3fde3a5fde5a7fde7a9fde9aafdebacfcecaefceeb0fcf0b2fcf2b4fcf4b6fcf6b8fcf7b9fcf9bbfc
+fbbdfcfdbf`.replace(/[\n\r]/g, '');
+
+const toColorPalette = (paletteString: string) =>
+  [...new Array(Math.floor(paletteString.length / 6))].map((_, i) => [
+    parseInt(paletteString.slice(i * 6, i * 6 + 2), 16),
+    parseInt(paletteString.slice(i * 6 + 2, i * 6 + 4), 16),
+    parseInt(paletteString.slice(i * 6 + 4, i * 6 + 6), 16),
+    Math.round((i < 248 ? 255 : 32 * (255 - i) + 31) * 0.75), // optional: make the end of the palette less opaque
+  ]);
+
+/** @internal */
+export const turboPalette = toColorPalette(turboString);
+
+/** @internal */
+export const magmaPalette = toColorPalette(magmaString);