Merge branch 'release-0.19.0' of github.com:metabase/metabase into data-reference-instrumentation

frontend/src/metabase/lib/visualization_settings.js

@@ -274,7 +274,7 @@ const SETTINGS = {
     },
     "pie.dimension": {
         section: "Data",
-        title: "Measure",
+        title: "Dimension",
         widget: ChartSettingSelect,
         isValid: ([{ card, data }], vizSettings) =>
             columnsAreValid(card.visualization_settings["pie.dimension"], data, isDimension),
@@ -286,7 +286,7 @@ const SETTINGS = {
     },
     "pie.metric": {
         section: "Data",
-        title: "Slice by",
+        title: "Measure",
         widget: ChartSettingSelect,
         isValid: ([{ card, data }], vizSettings) =>
             columnsAreValid(card.visualization_settings["pie.metric"], data, isMetric),

frontend/src/metabase/query_builder/VisualizationSettings.jsx

@@ -92,7 +92,7 @@ export default class VisualizationSettings extends React.Component {
                     {this.renderChartTypePicker()}
                     <ModalWithTrigger
                         className="Modal Modal--wide Modal--tall"
-                        triggerElement={<Icon name="gear" />}
+                        triggerElement={<span data-metabase-event="Query Builder;Chart Settings"><Icon name="gear"/></span>}
                         triggerClasses="text-brand-hover"
                     >
                         <ChartSettings

frontend/src/metabase/query_builder/template_tags/TagEditorHelp.jsx

@@ -56,7 +56,7 @@ const TagExample = ({ datasetQuery, setQuery }) =>
             { setQuery && (
                 <div
                     className="Button Button--small"
-                    data-metabase-event="QueryBuilder;Template Tage Example Query Used"
+                    data-metabase-event="QueryBuilder;Template Tag Example Query Used"
                     onClick={() => setQuery(datasetQuery, true) }
                 >
                     Try it

frontend/src/metabase/visualizations/components/ChartSettings.jsx

@@ -5,6 +5,7 @@ import _ from "underscore";
 
 import Visualization from "metabase/visualizations/components/Visualization.jsx"
 import { getSettingsWidgets } from "metabase/lib/visualization_settings";
+import MetabaseAnalytics from "metabase/lib/analytics";
 
 const ChartSettingsTab = ({name, active, onClick}) =>
   <a
@@ -54,6 +55,9 @@ class ChartSettings extends Component {
     }
 
     onChangeSettings = (newSettings) => {
+        for (const key of Object.keys(newSettings)) {
+            MetabaseAnalytics.trackEvent("Chart Settings", "Change Setting", key);
+        }
         this.setState({
             settings: {
                 ...this.state.settings,
@@ -109,10 +113,10 @@ class ChartSettings extends Component {
                   </div>
               </div>
               <div className="pt1">
-                <a className={cx("Button Button--primary", { disabled: !isDirty })} href="" onClick={() => this.onDone()}>Done</a>
-                <a className="text-grey-2 ml2" onClick={onClose}>Cancel</a>
+                <a className={cx("Button Button--primary", { disabled: !isDirty })} onClick={() => this.onDone()} data-metabase-event="Chart Settings;Done">Done</a>
+                <a className="text-grey-2 ml2" onClick={onClose} data-metabase-event="Chart Settings;Cancel">Cancel</a>
                 { !_.isEqual(this.state.settings, {}) &&
-                    <a className="Button Button--warning float-right" onClick={() => this.setState({ settings: {} })}>Reset to defaults</a>
+                    <a className="Button Button--warning float-right" onClick={() => this.setState({ settings: {} })} data-metabase-event="Chart Settings;Reset">Reset to defaults</a>
                 }
               </div>
           </div>

frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx

@@ -239,6 +239,7 @@ export default class LineAreaBarChart extends Component {
                 <CardRenderer
                     {...this.props}
                     chartType={this.getChartType()}
+                    series={series}
                     settings={settings}
                     className="flex-full"
                     renderer={lineAreaBarRenderer}

frontend/src/metabase/visualizations/lib/LineAreaBarRenderer.js

@@ -503,15 +503,18 @@ export default function lineAreaBar(element, { series, onHoverChange, onRender,
     // HACK: This ensures each group is sorted by the same order as xValues,
     // otherwise we can end up with line charts with x-axis labels in the correct order
     // but the points in the wrong order. There may be a more efficient way to do this.
-    let sortMap = new Map()
-    for (const [index, key] of xValues.entries()) {
-        sortMap.set(key, index);
-    }
-    for (const group of groups) {
-        group.forEach(g => {
-            const sorted = g.top(Infinity).sort((a, b) => sortMap.get(a.key) - sortMap.get(b.key));
-            g.all = () => sorted;
-        });
+    // Don't apply to linear or timeseries X-axis since the points are always plotted in order
+    if (!isTimeseries && !isLinear) {
+        let sortMap = new Map()
+        for (const [index, key] of xValues.entries()) {
+            sortMap.set(key, index);
+        }
+        for (const group of groups) {
+            group.forEach(g => {
+                const sorted = g.top(Infinity).sort((a, b) => sortMap.get(a.key) - sortMap.get(b.key));
+                g.all = () => sorted;
+            });
+        }
     }
 
     let parent;