chore: add shared plugin controls utilities

package.json

@@ -173,6 +173,7 @@
         {
           "files": "*.{js,jsx,ts,tsx}",
           "rules": {
+            "no-plusplus": "off",
             "react/jsx-no-literals": "off",
             "@typescript-eslint/no-explicit-any": [
               "warn",

packages/superset-ui-chart/README.md

@@ -84,6 +84,12 @@ const render = () => (
 );
 ```
 
+##### `controls`
+
+There are some helpers for plugin controls that can be imported from subdirectories of
+`@superset-ui/chart`. If you're building a third-party plugin, modules that may be of use are
+`@superset-ui/chart/controls/selectOptions` and `@superset-ui/chart/controls/D3Formatting`.
+
 ##### `<SuperChart />`
 
 Coming soon.

packages/superset-ui-chart/package.json

@@ -45,6 +45,8 @@
     "@superset-ui/core": "^0.12.0",
     "@superset-ui/dimension": "^0.12.0",
     "@superset-ui/query": "^0.12.0",
+    "@superset-ui/translation": "0.x",
+    "@superset-ui/validator": "0.x",
     "react": "^16.13.1"
   }
 }

packages/superset-ui-chart/src/controls/D3Formatting.ts

@@ -0,0 +1,49 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// D3 specific formatting config
+
+export const D3_FORMAT_DOCS = 'D3 format syntax: https://github.com/d3/d3-format';
+
+// input choices & options
+export const D3_FORMAT_OPTIONS = [
+  ['SMART_NUMBER', 'Adaptative formating'],
+  ['~g', 'Original value'],
+  [',d', ',d (12345.432 => 12,345)'],
+  ['.1s', '.1s (12345.432 => 10k)'],
+  ['.3s', '.3s (12345.432 => 12.3k)'],
+  [',.1%', ',.1% (12345.432 => 1,234,543.2%)'],
+  ['.3%', '.3% (12345.432 => 1234543.200%)'],
+  ['.4r', '.4r (12345.432 => 12350)'],
+  [',.3f', ',.3f (12345.432 => 12,345.432)'],
+  ['+,', '+, (12345.432 => +12,345.432)'],
+  ['$,.2f', '$,.2f (12345.432 => $12,345.43)'],
+  ['DURATION', 'Duration in ms (66000 => 1m 6s)'],
+  ['DURATION_SUB', 'Duration in ms (100.40008 => 100ms 400µs 80ns)'],
+];
+
+export const D3_TIME_FORMAT_OPTIONS = [
+  ['smart_date', 'Adaptative formating'],
+  ['%d/%m/%Y', '%d/%m/%Y | 14/01/2019'],
+  ['%m/%d/%Y', '%m/%d/%Y | 01/14/2019'],
+  ['%Y-%m-%d', '%Y-%m-%d | 2019-01-14'],
+  ['%Y-%m-%d %H:%M:%S', '%Y-%m-%d %H:%M:%S | 2019-01-14 01:32:10'],
+  ['%d-%m-%Y %H:%M:%S', '%Y-%m-%d %H:%M:%S | 14-01-2019 01:32:10'],
+  ['%H:%M:%S', '%H:%M:%S | 01:32:10'],
+];

packages/superset-ui-chart/src/controls/index.ts

@@ -0,0 +1,5 @@
+import * as sectionsModule from './sections';
+
+export const sections = sectionsModule;
+export * from './D3Formatting';
+export * from './selectOptions';

packages/superset-ui-chart/src/controls/sections.tsx

@@ -0,0 +1,109 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { t } from '@superset-ui/translation';
+
+// A few standard controls sections that are used internally.
+// Not recommended for use in third-party plugins.
+
+export const druidTimeSeries = {
+  label: t('Time'),
+  expanded: true,
+  description: t('Time related form attributes'),
+  controlSetRows: [['time_range']],
+};
+
+export const datasourceAndVizType = {
+  label: t('Datasource & Chart Type'),
+  expanded: true,
+  controlSetRows: [
+    ['datasource'],
+    ['viz_type'],
+    [
+      {
+        name: 'slice_id',
+        config: {
+          type: 'HiddenControl',
+          label: t('Chart ID'),
+          hidden: true,
+          description: t('The id of the active chart'),
+        },
+      },
+      {
+        name: 'cache_timeout',
+        config: {
+          type: 'HiddenControl',
+          label: t('Cache Timeout (seconds)'),
+          hidden: true,
+          description: t('The number of seconds before expiring the cache'),
+        },
+      },
+      {
+        name: 'url_params',
+        config: {
+          type: 'HiddenControl',
+          label: t('URL Parameters'),
+          hidden: true,
+          description: t('Extra parameters for use in jinja templated queries'),
+        },
+      },
+      {
+        name: 'time_range_endpoints',
+        config: {
+          type: 'HiddenControl',
+          label: t('Time range endpoints'),
+          hidden: true,
+          description: t('Time range endpoints (SIP-15)'),
+        },
+      },
+    ],
+  ],
+};
+
+export const colorScheme = {
+  label: t('Color Scheme'),
+  controlSetRows: [['color_scheme', 'label_colors']],
+};
+
+export const sqlaTimeSeries = {
+  label: t('Time'),
+  description: t('Time related form attributes'),
+  expanded: true,
+  controlSetRows: [['granularity_sqla'], ['time_range']],
+};
+
+export const annotations = {
+  label: t('Annotations and Layers'),
+  tabOverride: 'data',
+  expanded: true,
+  controlSetRows: [
+    [
+      {
+        name: 'annotation_layers',
+        config: {
+          type: 'AnnotationLayerControl',
+          label: '',
+          default: [],
+          description: 'Annotation Layers',
+          renderTrigger: true,
+          tabOverride: 'data',
+        },
+      },
+    ],
+  ],
+};

packages/superset-ui-chart/src/controls/selectOptions.ts

@@ -0,0 +1,42 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// helper functions for select controls
+
+export type Formattable = string | number;
+
+export type Formatted = [Formattable, string];
+
+/** Turns an array of string/number options into options for a select input */
+export function formatSelectOptions(options: Formattable[]): Formatted[] {
+  return options.map(opt => [opt, opt.toString()]);
+}
+
+/**
+ * outputs array of arrays
+ * formatSelectOptionsForRange(1, 5)
+ * returns [[1,'1'], [2,'2'], [3,'3'], [4,'4'], [5,'5']]
+ */
+export function formatSelectOptionsForRange(start: number, end: number) {
+  const options: Formatted[] = [];
+  for (let i = start; i <= end; i++) {
+    options.push([i, i.toString()]);
+  }
+  return options;
+}

packages/superset-ui-chart/src/index.ts

@@ -15,5 +15,7 @@ export { default as getChartTransformPropsRegistry } from './registries/ChartTra
 
 export { default as ChartDataProvider } from './components/ChartDataProvider';
 
+export * from './controls/index';
+
 export * from './types/TransformFunction';
 export * from './types/QueryResponse';

packages/superset-ui-chart/test/controls/selectOptions.test.ts

@@ -0,0 +1,26 @@
+import { formatSelectOptions, formatSelectOptionsForRange } from '../../src';
+
+describe('formatSelectOptions', () => {
+  it('formats an array of options', () => {
+    expect(formatSelectOptions([1, 5, 10, 25, 50, 'unlimited'])).toEqual([
+      [1, '1'],
+      [5, '5'],
+      [10, '10'],
+      [25, '25'],
+      [50, '50'],
+      ['unlimited', 'unlimited'],
+    ]);
+  });
+});
+
+describe('formatSelectOptionsForRange', () => {
+  it('generates select options from a range', () => {
+    expect(formatSelectOptionsForRange(1, 5)).toEqual([
+      [1, '1'],
+      [2, '2'],
+      [3, '3'],
+      [4, '4'],
+      [5, '5'],
+    ]);
+  });
+});