Chart: Bubble size control by coefficient and sizemode (#3928)

getredash · Dec 26, 2019 · f5900a1 · f5900a1
1 parent c2b39db
commit f5900a1
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 6 deletions.
diff --git a/client/app/visualizations/chart/Editor/ColumnMappingSelect.jsx b/client/app/visualizations/chart/Editor/ColumnMappingSelect.jsx
@@ -8,7 +8,7 @@ const MappingTypes = {
   y: { label: "Y Columns", multiple: true },
   series: { label: "Group by" },
   yError: { label: "Errors column" },
-  size: { label: "Bubble size column" },
+  size: { label: "Bubble Size Column" },
   zVal: { label: "Color Column" },
 };
 

diff --git a/client/app/visualizations/chart/Editor/GeneralSettings.jsx b/client/app/visualizations/chart/Editor/GeneralSettings.jsx
@@ -1,6 +1,6 @@
-import { isArray, map, mapValues, includes, some, each, difference } from "lodash";
+import { isArray, map, mapValues, includes, some, each, difference, toNumber } from "lodash";
 import React, { useMemo } from "react";
-import { Section, Select, Checkbox } from "@/components/visualizations/editor";
+import { Section, Select, Checkbox, InputNumber } from "@/components/visualizations/editor";
 import { UpdateOptionsStrategy } from "@/components/visualizations/editor/createTabbedEditor";
 import { EditorPropTypes } from "@/visualizations";
 
@@ -22,7 +22,7 @@ function getAvailableColumnMappingTypes(options) {
     result.push("zVal");
   }
 
-  if (!includes(["custom", "heatmap"], options.globalSeriesType)) {
+  if (!includes(["custom", "bubble", "heatmap"], options.globalSeriesType)) {
     result.push("yError");
   }
 
@@ -120,6 +120,36 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
         />
       ))}
 
+      {includes(["bubble"], options.globalSeriesType) && (
+        <React.Fragment>
+          <Section>
+            <InputNumber
+              label="Bubble Size Coefficient"
+              className="w-100"
+              data-test="Chart.BubbleCoefficient"
+              defaultValue={options.coefficient}
+              onChange={value => onOptionsChange({ coefficient: toNumber(value) })}
+            />
+          </Section>
+
+          <Section>
+            <Select
+              label="Bubble Size Proportional To"
+              className="w-100"
+              data-test="Chart.SizeMode"
+              defaultValue={options.sizemode}
+              onChange={mode => onOptionsChange({ sizemode: mode })}>
+              <Select.Option value="area" data-test="Chart.SizeMode.Area">
+                Area
+              </Select.Option>
+              <Select.Option value="diameter" data-test="Chart.SizeMode.Diameter">
+                Diameter
+              </Select.Option>
+            </Select>
+          </Section>
+        </React.Fragment>
+      )}
+
       {includes(["pie"], options.globalSeriesType) && (
         <Section>
           <Select

diff --git a/client/app/visualizations/chart/getOptions.js b/client/app/visualizations/chart/getOptions.js
@@ -13,6 +13,8 @@ const DEFAULT_OPTIONS = {
   valuesOptions: {},
   columnMapping: {},
   direction: { type: "counterclockwise" },
+  sizemode: "diameter",
+  coefficient: 1,
 
   // showDataLabels: false, // depends on chart type
   numberFormat: "0,0[.]00000",

diff --git a/client/app/visualizations/chart/plotly/fixtures/prepareData/bubble/default.json b/client/app/visualizations/chart/plotly/fixtures/prepareData/bubble/default.json
@@ -40,7 +40,7 @@
         "visible": true,
         "name": "a",
         "mode": "markers",
-        "marker": { "color": "red", "size": [51, 52, 53, 54] },
+        "marker": { "color": "red", "size": [51, 52, 53, 54], "sizemode": "diameter" },
         "x": ["x1", "x2", "x3", "x4"],
         "y": [10, 20, 30, 40],
         "error_y": { "array": [0, 0, 0, 0], "color": "red" },

diff --git a/client/app/visualizations/chart/plotly/prepareDefaultData.js b/client/app/visualizations/chart/plotly/prepareDefaultData.js
@@ -42,10 +42,12 @@ function prepareScatterSeries(series, options) {
 }
 
 function prepareBubbleSeries(series, options, { seriesColor, data }) {
+  const coefficient = options.coefficient || 1;
   series.mode = "markers";
   series.marker = {
     color: seriesColor,
-    size: map(data, i => i.size),
+    size: map(data, i => i.size * coefficient),
+    sizemode: options.sizemode || "diameter",
   };
   return series;
 }