New chart settings to change title of serieses (metabase#5951)

cogmeta · Oct 25, 2017 · 6cd637b · 6cd637b
1 parent 27bbc4f
commit 6cd637b
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 13 deletions.
diff --git a/frontend/src/metabase/visualizations/components/ChartSettings.jsx b/frontend/src/metabase/visualizations/components/ChartSettings.jsx
@@ -103,7 +103,7 @@ class ChartSettings extends Component {
         const { series } = this.state;
 
         const tabs = {};
-        for (let widget of getSettingsWidgets(series, this.onChangeSettings, isDashboard)) {
+        for (const widget of getSettingsWidgets(series, this.onChangeSettings, isDashboard)) {
             tabs[widget.section] = tabs[widget.section] || [];
             tabs[widget.section].push(widget);
         }

diff --git a/frontend/src/metabase/visualizations/components/LegendHeader.jsx b/frontend/src/metabase/visualizations/components/LegendHeader.jsx
@@ -49,18 +49,19 @@ export default class LegendHeader extends Component {
 
     render() {
         const { series, hovered, onRemoveSeries, actionButtons, onHoverChange, onChangeCardAndRun, settings, description, onVisualizationClick, visualizationIsClickable } = this.props;
-        const showDots = series.length > 1;
-        const isNarrow = this.state.width < 150;
-        const showTitles = !showDots || !isNarrow;
-
-        let colors = settings["graph.colors"] || DEFAULT_COLORS;
+        const showDots     = series.length > 1;
+        const isNarrow     = this.state.width < 150;
+        const showTitles   = !showDots || !isNarrow;
+        const colors       = settings["graph.colors"] || DEFAULT_COLORS;
+        const customTitles = settings["graph.series_labels"];
+        const titles       = (customTitles && customTitles.length === series.length) ? customTitles : series.map((thisSeries) => thisSeries.card.name);
 
         return (
             <div  className={cx(styles.LegendHeader, "Card-title mx1 flex flex-no-shrink flex-row align-center")}>
                 { series.map((s, index) => [
                     <LegendItem
                         key={index}
-                        title={s.card.name}
+                        title={titles[index]}
                         description={description}
                         color={colors[index % colors.length]}
                         showDot={showDots}

diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingInputs.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingInputs.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+import Input from "metabase/components/Input.jsx";
+
+// value is an array of strings. This component provides one input box per string
+export default function ChartSettingInputs({ value, onChange }) {
+    const inputs = value.map((str, i) => (
+        <Input
+            key={i}
+            className="input block full"
+            value={str}
+            onBlurChange={(e) => {
+                const newStr = e.target.value.trim();
+                if (!newStr || !newStr.length) return;
+
+                const newValue = value.slice(); // clone the original `value` array
+                newValue[i] = newStr;
+                onChange(newValue);
+            }}
+        />
+    ));
+
+    return (
+        <div>
+            {inputs}
+        </div>
+    );
+}
diff --git a/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js b/frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js
@@ -345,14 +345,11 @@ function setChartColor({ settings, chartType }, chart, groups, index) {
         // multiple stacks
         if (group.length > 1) {
             // compute shades of the assigned color
-            console.log("set ordinal colors:", colorShades(colors[index % colors.length], group.length)); // NOCOMMIT
             chart.ordinalColors(colorShades(colors[index % colors.length], group.length));
         } else {
-            console.log("set colors:", colors[index % colors.length]); // NOCOMMIT
             chart.colors(colors[index % colors.length]);
         }
     } else {
-        console.log("set colors [2]:", colors); // NOCOMMIT
         chart.ordinalColors(colors);
     }
 }

diff --git a/frontend/src/metabase/visualizations/lib/settings.js b/frontend/src/metabase/visualizations/lib/settings.js
@@ -13,6 +13,7 @@ import {
 import { isDate, isMetric, isDimension } from "metabase/lib/schema_metadata";
 
 import ChartSettingInput from "metabase/visualizations/components/settings/ChartSettingInput.jsx";
+import ChartSettingInputs from "metabase/visualizations/components/settings/ChartSettingInputs.jsx";
 import ChartSettingInputNumeric from "metabase/visualizations/components/settings/ChartSettingInputNumeric.jsx";
 import ChartSettingRadio from "metabase/visualizations/components/settings/ChartSettingRadio.jsx";
 import ChartSettingSelect from "metabase/visualizations/components/settings/ChartSettingSelect.jsx";
@@ -24,6 +25,7 @@ import ChartSettingColorsPicker from "metabase/visualizations/components/setting
 
 const WIDGETS = {
     input: ChartSettingInput,
+    inputs: ChartSettingInputs,
     number: ChartSettingInputNumeric,
     radio: ChartSettingRadio,
     select: ChartSettingSelect,

diff --git a/frontend/src/metabase/visualizations/lib/settings/graph.js b/frontend/src/metabase/visualizations/lib/settings/graph.js
@@ -8,10 +8,14 @@ import { dimensionIsTimeseries } from "metabase/visualizations/lib/timeseries";
 
 import _ from "underscore";
 
-function getSeriesTitles(series, vizSettings) {
+function getSeriesDefaultTitles(series, vizSettings) {
     return series.map(s => s.card.name);
 }
 
+function getSeriesTitles(series, vizSettings) {
+    return vizSettings["graph.series_labels"] || getSeriesDefaultTitles(series, vizSettings);
+}
+
 export const GRAPH_DATA_SETTINGS = {
   "graph._dimension_filter": {
       getDefault: ([{ card }]) => card.display === "scatter" ? isAny : isDimension,
@@ -173,8 +177,8 @@ export const GRAPH_COLORS_SETTINGS = {
       getTitle: ([{ card: { display } }]) =>
           capitalize(display === "scatter" ? "bubble" : display) + " colors",
       widget: "colors",
-      readDependencies: ["graph.dimensions", "graph.metrics"],
-      getDefault: ([{ card, data }], vizSettings) => {
+      readDependencies: ["graph.dimensions", "graph.metrics", "graph.series_labels"],
+      getDefault: ([{ card }], vizSettings) => {
           return getCardColors(card);
       },
       getProps: (series, vizSettings) => {
@@ -334,4 +338,12 @@ export const GRAPH_AXIS_SETTINGS = {
       getDefault: (series, vizSettings) =>
           series.length === 1 ? getFriendlyName(series[0].data.cols[1]) : null
   },
+    "graph.series_labels": {
+        section: "Labels",
+        title: "Series labels",
+        widget: "inputs",
+        readDependencies: ["graph.dimensions", "graph.metrics"],
+        getHidden: (series) => series.length < 2,
+        getDefault: (series, vizSettings) => getSeriesDefaultTitles(series, vizSettings)
+    },
 }