[TSVB] Use default Kibana palette for split series

src/legacy/core_plugins/vis_type_timeseries/public/components/vis_types/timeseries/config.js

@@ -53,7 +53,7 @@ export const TimeseriesConfig = injectI18n(function(props) {
     point_size: '',
     value_template: '{{value}}',
     offset_time: '',
-    split_color_mode: 'gradient',
+    split_color_mode: 'rainbow',
     axis_min: '',
     axis_max: '',
     stacked: STACKED_OPTIONS.NONE,
@@ -140,17 +140,17 @@ export const TimeseriesConfig = injectI18n(function(props) {
   const splitColorOptions = [
     {
       label: intl.formatMessage({
-        id: 'visTypeTimeseries.timeSeries.gradientLabel',
-        defaultMessage: 'Gradient',
+        id: 'visTypeTimeseries.timeSeries.rainbowLabel',
+        defaultMessage: 'Rainbow',
       }),
-      value: 'gradient',
+      value: 'rainbow',
     },
     {
       label: intl.formatMessage({
-        id: 'visTypeTimeseries.timeSeries.rainbowLabel',
-        defaultMessage: 'Rainbow',
+        id: 'visTypeTimeseries.timeSeries.gradientLabel',
+        defaultMessage: 'Gradient',
       }),
-      value: 'rainbow',
+      value: 'gradient',
     },
   ];
   const selectedSplitColorOption = splitColorOptions.find(option => {

src/legacy/core_plugins/vis_type_timeseries/public/legacy.ts

@@ -25,6 +25,7 @@ import { plugin } from '.';
 const plugins: Readonly<MetricsPluginSetupDependencies> = {
   expressions: npSetup.plugins.expressions,
   visualizations: npSetup.plugins.visualizations,
+  charts: npSetup.plugins.charts,
 };
 
 const pluginInstance = plugin({} as PluginInitializerContext);

src/legacy/core_plugins/vis_type_timeseries/public/plugin.ts

@@ -29,13 +29,16 @@ import {
   setFieldFormats,
   setCoreStart,
   setDataStart,
+  setChartsSetup,
 } from './services';
 import { DataPublicPluginStart } from '../../../../plugins/data/public';
+import { ChartsPluginSetup } from '../../../../plugins/charts/public';
 
 /** @internal */
 export interface MetricsPluginSetupDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['setup']>;
   visualizations: VisualizationsSetup;
+  charts: ChartsPluginSetup;
 }
 
 /** @internal */
@@ -53,10 +56,11 @@ export class MetricsPlugin implements Plugin<Promise<void>, void> {
 
   public async setup(
     core: CoreSetup,
-    { expressions, visualizations }: MetricsPluginSetupDependencies
+    { expressions, visualizations, charts }: MetricsPluginSetupDependencies
   ) {
     expressions.registerFunction(createMetricsFn);
     setUISettings(core.uiSettings);
+    setChartsSetup(charts);
     visualizations.createReactVisualization(metricsVisDefinition);
   }
 

src/legacy/core_plugins/vis_type_timeseries/public/services.ts

@@ -18,6 +18,7 @@
  */
 
 import { I18nStart, SavedObjectsStart, IUiSettingsClient, CoreStart } from 'src/core/public';
+import { ChartsPluginSetup } from '../../../../plugins/charts/public';
 import { createGetterSetter } from '../../../../plugins/kibana_utils/public';
 import { DataPublicPluginStart } from '../../../../plugins/data/public';
 
@@ -36,3 +37,7 @@ export const [getCoreStart, setCoreStart] = createGetterSetter<CoreStart>('CoreS
 export const [getDataStart, setDataStart] = createGetterSetter<DataPublicPluginStart>('DataStart');
 
 export const [getI18n, setI18n] = createGetterSetter<I18nStart>('I18n');
+
+export const [getChartsSetup, setChartsSetup] = createGetterSetter<ChartsPluginSetup>(
+  'ChartsPluginSetup'
+);

src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js

@@ -33,7 +33,7 @@ import {
 import { EuiIcon } from '@elastic/eui';
 import { getTimezone } from '../../../lib/get_timezone';
 import { eventBus, ACTIVE_CURSOR } from '../../lib/active_cursor';
-import { getUISettings } from '../../../services';
+import { getUISettings, getChartsSetup } from '../../../services';
 import { GRID_LINE_CONFIG, ICON_TYPES_MAP, STACKED_OPTIONS } from '../../constants';
 import { AreaSeriesDecorator } from './decorators/area_decorator';
 import { BarSeriesDecorator } from './decorators/bar_decorator';
@@ -94,6 +94,12 @@ export const TimeSeries = ({
   // apply legend style change if bgColor is configured
   const classes = classNames('tvbVisTimeSeries', getChartClasses(backgroundColor));
 
+  // If the color isn't configured by the user, use the color mapping service
+  // to assign a color from the Kibana palette. Colors will be shared across the
+  // session, including dashboards.
+  const { colors } = getChartsSetup();
+  colors.mappedColors.mapKeys(series.filter(({ color }) => !color).map(({ label }) => label));
+
   return (
     <Chart ref={chartRef} renderer="canvas" className={classes}>
       <Settings
@@ -163,6 +169,8 @@ export const TimeSeries = ({
           const stackAccessors = getStackAccessors(stack);
           const isPercentage = stack === STACKED_OPTIONS.PERCENT;
           const key = `${id}-${label}`;
+          // Only use color mapping if there is no color from the server
+          const finalColor = color ?? colors.mappedColors.mapping[label];
 
           if (bars.show) {
             return (
@@ -174,7 +182,7 @@ export const TimeSeries = ({
                 data={data}
                 hideInLegend={hideInLegend}
                 bars={bars}
-                color={color}
+                color={finalColor}
                 stackAccessors={stackAccessors}
                 stackAsPercentage={isPercentage}
                 xScaleType={xScaleType}
@@ -199,7 +207,7 @@ export const TimeSeries = ({
                 data={data}
                 hideInLegend={hideInLegend}
                 lines={lines}
-                color={color}
+                color={finalColor}
                 stackAccessors={stackAccessors}
                 stackAsPercentage={isPercentage}
                 points={points}

src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/get_split_colors.js

@@ -19,37 +19,12 @@
 
 import Color from 'color';
 
-export function getSplitColors(inputColor, size = 10, style = 'gradient') {
+export function getSplitColors(inputColor, size = 10, style = 'rainbow') {
   const color = new Color(inputColor);
   const colors = [];
   let workingColor = Color.hsl(color.hsl().object());
 
-  if (style === 'rainbow') {
-    return [
-      '#68BC00',
-      '#009CE0',
-      '#B0BC00',
-      '#16A5A5',
-      '#D33115',
-      '#E27300',
-      '#FCC400',
-      '#7B64FF',
-      '#FA28FF',
-      '#333333',
-      '#808080',
-      '#194D33',
-      '#0062B1',
-      '#808900',
-      '#0C797D',
-      '#9F0500',
-      '#C45100',
-      '#FB9E00',
-      '#653294',
-      '#AB149E',
-      '#0F1419',
-      '#666666',
-    ];
-  } else {
+  if (style !== 'rainbow') {
     colors.push(color.string());
     const rotateBy = color.luminosity() / (size - 1);
     for (let i = 0; i < size - 1; i++) {

src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/get_splits.test.js

@@ -144,7 +144,7 @@ describe('getSplits(resp, panel, series)', () => {
         key: 'example-01',
         label: 'example-01',
         meta: { bucketSize: 10 },
-        color: 'rgb(255, 0, 0)',
+        color: undefined,
         timeseries: { buckets: [] },
         SIBAGG: { value: 1 },
       },
@@ -153,7 +153,7 @@ describe('getSplits(resp, panel, series)', () => {
         key: 'example-02',
         label: 'example-02',
         meta: { bucketSize: 10 },
-        color: 'rgb(147, 0, 0)',
+        color: undefined,
         timeseries: { buckets: [] },
         SIBAGG: { value: 2 },
       },

test/functional/apps/visualize/_tsvb_time_series.ts

@@ -25,7 +25,6 @@ export default function({ getPageObjects, getService }: FtrProviderContext) {
   const retry = getService('retry');
   const log = getService('log');
   const kibanaServer = getService('kibanaServer');
-  const testSubjects = getService('testSubjects');
 
   describe('visual builder', function describeIndexTests() {
     beforeEach(async () => {
@@ -126,20 +125,18 @@ export default function({ getPageObjects, getService }: FtrProviderContext) {
         expect(actualCountMin).to.be('3 hours');
       });
 
-      // --reversed class is not implemented in @elastic\chart
-      describe.skip('Dark mode', () => {
+      describe('Dark mode', () => {
         before(async () => {
           await kibanaServer.uiSettings.update({
             'theme:darkMode': true,
           });
         });
 
-        it(`viz should have 'reversed' class when background color is white`, async () => {
+        it(`viz should have light class when background color is white`, async () => {
           await visualBuilder.clickPanelOptions('timeSeries');
           await visualBuilder.setBackgroundColor('#FFFFFF');
 
-          const classNames = await testSubjects.getAttribute('timeseriesChart', 'class');
-          expect(classNames.includes('tvbVisTimeSeries--reversed')).to.be(true);
+          expect(await visualBuilder.checkTimeSeriesIsLight()).to.be(true);
         });
 
         after(async () => {

test/functional/page_objects/visual_builder_page.ts

@@ -71,6 +71,10 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
       }
     }
 
+    public async checkTimeSeriesIsLight() {
+      return await find.existsByCssSelector('.tvbVisTimeSeriesLight');
+    }
+
     public async checkTimeSeriesLegendIsPresent() {
       const isPresent = await find.existsByCssSelector('.echLegend');
       if (!isPresent) {