Counter visualization enhancements

.circleci/config.yml

@@ -75,7 +75,7 @@ jobs:
       - run: sudo pip3 install -r requirements_bundles.txt
       - run: npm ci
       - run: npm run bundle
-      - run: npm test
+      - run: npm test -- --runInBand
       - run: npm run lint
   frontend-e2e-tests:
     environment:

client/app/visualizations/counter/Editor/CounterValueOptions.jsx

@@ -0,0 +1,142 @@
+import { isNil, get, map, includes } from "lodash";
+import React from "react";
+import PropTypes from "prop-types";
+import { Section, InputNumber, Input, Select, Checkbox, ContextHelp } from "@/components/visualizations/editor";
+
+export default function CounterValueOptions({ disabled, counterTypes, options, data, onChange }) {
+  const additionalOptions = get(counterTypes, [options.type, "options"], []);
+  const canReturnRow = get(counterTypes, [options.type, "canReturnRow"], false);
+
+  const formatInfo = (
+    <ContextHelp placement="topLeft" arrowPointAtCenter>
+      <div className="m-b-5">Use special names to access additional properties:</div>
+      <div>
+        <code>{"{{ @@value }}"}</code> raw value (as string);
+      </div>
+      <div>
+        <code>{"{{ @@value_formatted }}"}</code> formatted value;
+      </div>
+      {canReturnRow && (
+        <div className="m-t-5">
+          Query result columns can be referenced using <code>{"{{ column_name }}"}</code> syntax.
+        </div>
+      )}
+    </ContextHelp>
+  );
+
+  return (
+    <React.Fragment>
+      <Section>
+        <Select
+          layout="horizontal"
+          label="Type"
+          data-test="Counter.CounterType"
+          className="w-100"
+          defaultValue={options.type}
+          onChange={type => onChange({ type })}>
+          {map(counterTypes, ({ name }, type) => (
+            <Select.Option key={type} data-test={`Counter.CounterType.${type}`}>
+              {name}
+            </Select.Option>
+          ))}
+        </Select>
+      </Section>
+
+      {includes(additionalOptions, "column") && (
+        <Section>
+          <Select
+            layout="horizontal"
+            label="Column Name"
+            data-test="Counter.ColumnName"
+            className="w-100"
+            disabled={disabled}
+            allowClear
+            placeholder="Select column..."
+            defaultValue={isNil(options.column) ? undefined : options.column}
+            onChange={column => onChange({ column: column || null })}>
+            {map(data.columns, col => (
+              <Select.Option key={col.name} data-test={`Counter.ColumnName.${col.name}`}>
+                {col.name}
+              </Select.Option>
+            ))}
+          </Select>
+        </Section>
+      )}
+
+      {includes(additionalOptions, "rowNumber") && (
+        <Section>
+          <InputNumber
+            layout="horizontal"
+            label="Row Number"
+            data-test="Counter.RowNumber"
+            className="w-100"
+            disabled={disabled}
+            defaultValue={options.rowNumber}
+            onChange={rowNumber => onChange({ rowNumber })}
+          />
+        </Section>
+      )}
+
+      <Section>
+        <Input
+          layout="horizontal"
+          label={<React.Fragment>Display Format {formatInfo}</React.Fragment>}
+          data-test="Counter.DisplayFormat"
+          className="w-100"
+          disabled={disabled}
+          defaultValue={options.displayFormat}
+          onChange={e => onChange({ displayFormat: e.target.value })}
+        />
+      </Section>
+
+      <Section>
+        <Checkbox
+          data-test="Counter.ShowTooltip"
+          disabled={disabled}
+          checked={options.showTooltip}
+          onChange={e => onChange({ showTooltip: e.target.checked })}>
+          Show Tooltip
+        </Checkbox>
+      </Section>
+
+      <Section>
+        <Input
+          layout="horizontal"
+          label={<React.Fragment>Tooltip Format {formatInfo}</React.Fragment>}
+          data-test="Counter.TooltipFormat"
+          className="w-100"
+          disabled={disabled || !options.showTooltip}
+          defaultValue={options.tooltipFormat}
+          onChange={e => onChange({ tooltipFormat: e.target.value })}
+        />
+      </Section>
+    </React.Fragment>
+  );
+}
+
+CounterValueOptions.propTypes = {
+  disabled: PropTypes.bool,
+  counterTypes: PropTypes.object,
+  options: PropTypes.shape({
+    type: PropTypes.string,
+    column: PropTypes.string,
+    rowNumber: PropTypes.number,
+    displayFormat: PropTypes.string,
+    showTooltip: PropTypes.bool,
+    tooltipFormat: PropTypes.string,
+  }).isRequired,
+  data: PropTypes.shape({
+    columns: PropTypes.arrayOf(
+      PropTypes.shape({
+        name: PropTypes.string,
+      }).isRequired
+    ),
+  }).isRequired,
+  onChange: PropTypes.func,
+};
+
+CounterValueOptions.defaultProps = {
+  disabled: false,
+  counterTypes: {},
+  onChange: () => {},
+};

client/app/visualizations/counter/Editor/GeneralSettings.jsx

@@ -1,88 +1,58 @@
-import { map } from "lodash";
 import React from "react";
-import { Section, Select, Input, InputNumber, Switch } from "@/components/visualizations/editor";
+import { Section, Input, ContextHelp } from "@/components/visualizations/editor";
 import { EditorPropTypes } from "@/visualizations/prop-types";
 
-export default function GeneralSettings({ options, data, visualizationName, onOptionsChange }) {
+export default function GeneralSettings({ options, visualizationName, onOptionsChange }) {
   return (
     <React.Fragment>
       <Section>
         <Input
           layout="horizontal"
           label="Counter Label"
           className="w-100"
-          data-test="Counter.General.Label"
+          data-test="Counter.CounterLabel"
           defaultValue={options.counterLabel}
           placeholder={visualizationName}
           onChange={e => onOptionsChange({ counterLabel: e.target.value })}
         />
       </Section>
 
       <Section>
-        <Select
-          layout="horizontal"
-          label="Counter Value Column Name"
-          className="w-100"
-          data-test="Counter.General.ValueColumn"
-          defaultValue={options.counterColName}
-          disabled={options.countRow}
-          onChange={counterColName => onOptionsChange({ counterColName })}>
-          {map(data.columns, col => (
-            <Select.Option key={col.name} data-test={"Counter.General.ValueColumn." + col.name}>
-              {col.name}
-            </Select.Option>
-          ))}
-        </Select>
-      </Section>
-
-      <Section>
-        <InputNumber
+        <Input
           layout="horizontal"
-          label="Counter Value Row Number"
+          label={
+            <>
+              Number Format <ContextHelp.NumberFormatSpecs />
+            </>
+          }
           className="w-100"
-          data-test="Counter.General.ValueRowNumber"
-          defaultValue={options.rowNumber}
-          disabled={options.countRow}
-          onChange={rowNumber => onOptionsChange({ rowNumber })}
+          data-test="Counter.NumberFormat"
+          defaultValue={options.numberFormat}
+          onChange={e => onOptionsChange({ numberFormat: e.target.value })}
         />
       </Section>
 
       <Section>
-        <Select
+        <Input
           layout="horizontal"
-          label="Target Value Column Name"
+          label="Formatting Decimal Character"
           className="w-100"
-          data-test="Counter.General.TargetValueColumn"
-          defaultValue={options.targetColName}
-          onChange={targetColName => onOptionsChange({ targetColName })}>
-          <Select.Option value="">No target value</Select.Option>
-          {map(data.columns, col => (
-            <Select.Option key={col.name} data-test={"Counter.General.TargetValueColumn." + col.name}>
-              {col.name}
-            </Select.Option>
-          ))}
-        </Select>
+          data-test="Counter.DecimalCharacter"
+          defaultValue={options.stringDecChar}
+          onChange={e => onOptionsChange({ stringDecChar: e.target.value })}
+        />
       </Section>
 
       <Section>
-        <InputNumber
+        <Input
           layout="horizontal"
-          label="Target Value Row Number"
+          label="Formatting Thousands Separator"
           className="w-100"
-          data-test="Counter.General.TargetValueRowNumber"
-          defaultValue={options.targetRowNumber}
-          onChange={targetRowNumber => onOptionsChange({ targetRowNumber })}
+          data-test="Counter.ThousandsSeparator"
+          defaultValue={options.stringThouSep}
+          onChange={e => onOptionsChange({ stringThouSep: e.target.value })}
         />
       </Section>
-
-      <Section>
-        <Switch
-          data-test="Counter.General.CountRows"
-          defaultChecked={options.countRow}
-          onChange={countRow => onOptionsChange({ countRow })}>
-          Count Rows
-        </Switch>
-      </Section>
     </React.Fragment>
   );
 }