chore: add shared plugin controls utilities

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

@@ -27,6 +27,8 @@
     "access": "public"
   },
   "dependencies": {
+    "@superset-ui/translation": "^0.12.21",
+    "@superset-ui/validator": "^0.12.21",
     "@types/react": "^16.9.34",
     "@types/react-loadable": "^5.4.2",
     "@vx/responsive": "^0.0.195",

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'],
+  [' ', '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/NVD3.ts

@@ -0,0 +1,299 @@
+/**
+ * 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.
+ */
+
+// These are control configurations that are shared ONLY within the NVD3 viz plugin repo.
+// It is not recommended to use these for third-party plugins.
+
+import { t } from '@superset-ui/translation';
+import { formatSelectOptions } from './selectOptions';
+import { D3_TIME_FORMAT_OPTIONS, D3_FORMAT_DOCS, D3_FORMAT_OPTIONS } from './D3Formatting';
+
+/*
+  Plugins in question:
+
+  AreaChartPlugin,
+  BarChartPlugin,
+  BubbleChartPlugin,
+  BulletChartPlugin,
+  CompareChartPlugin,
+  DistBarChartPlugin,
+  DualLineChartPlugin,
+  LineChartPlugin,
+  LineMultiChartPlugin,
+  PieChartPlugin,
+  TimePivotChartPlugin,
+*/
+
+export const yAxis2Format = {
+  name: 'y_axis_2_format',
+  config: {
+    type: 'SelectControl',
+    freeForm: true,
+    label: t('Right Axis Format'),
+    default: 'SMART_NUMBER',
+    choices: D3_FORMAT_OPTIONS,
+    description: D3_FORMAT_DOCS,
+  },
+};
+
+export const showMarkers = {
+  name: 'show_markers',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Show Markers'),
+    renderTrigger: true,
+    default: false,
+    description: t('Show data points as circle markers on the lines'),
+  },
+};
+
+export const leftMargin = {
+  name: 'left_margin',
+  config: {
+    type: 'SelectControl',
+    freeForm: true,
+    clearable: false,
+    label: t('Left Margin'),
+    choices: formatSelectOptions(['auto', 50, 75, 100, 125, 150, 200]),
+    default: 'auto',
+    renderTrigger: true,
+    description: t('Left margin, in pixels, allowing for more room for axis labels'),
+  },
+};
+
+export const yAxisShowMinmax = {
+  name: 'y_axis_showminmax',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Y bounds'),
+    renderTrigger: true,
+    default: false,
+    description: t('Whether to display the min and max values of the Y-axis'),
+  },
+};
+
+export const lineInterpolation = {
+  name: 'line_interpolation',
+  config: {
+    type: 'SelectControl',
+    label: t('Line Style'),
+    renderTrigger: true,
+    choices: formatSelectOptions([
+      'linear',
+      'basis',
+      'cardinal',
+      'monotone',
+      'step-before',
+      'step-after',
+    ]),
+    default: 'linear',
+    description: t('Line interpolation as defined by d3.js'),
+  },
+};
+
+export const showBrush = {
+  name: 'show_brush',
+  config: {
+    type: 'SelectControl',
+    label: t('Show Range Filter'),
+    renderTrigger: true,
+    clearable: false,
+    default: 'auto',
+    choices: [
+      ['yes', 'Yes'],
+      ['no', 'No'],
+      ['auto', 'Auto'],
+    ],
+    description: t('Whether to display the time range interactive selector'),
+  },
+};
+
+export const showLegend = {
+  name: 'show_legend',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Legend'),
+    renderTrigger: true,
+    default: true,
+    description: t('Whether to display the legend (toggles)'),
+  },
+};
+
+export const showControls = {
+  name: 'show_controls',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Extra Controls'),
+    renderTrigger: true,
+    default: false,
+    description: t(
+      'Whether to show extra controls or not. Extra controls ' +
+        'include things like making mulitBar charts stacked ' +
+        'or side by side.',
+    ),
+  },
+};
+
+export const xAxisLabel = {
+  name: 'x_axis_label',
+  config: {
+    type: 'TextControl',
+    label: t('X Axis Label'),
+    renderTrigger: true,
+    default: '',
+  },
+};
+
+export const bottomMargin = {
+  name: 'bottom_margin',
+  config: {
+    type: 'SelectControl',
+    clearable: false,
+    freeForm: true,
+    label: t('Bottom Margin'),
+    choices: formatSelectOptions(['auto', 50, 75, 100, 125, 150, 200]),
+    default: 'auto',
+    renderTrigger: true,
+    description: t('Bottom margin, in pixels, allowing for more room for axis labels'),
+  },
+};
+
+export const xTicksLayout = {
+  name: 'x_ticks_layout',
+  config: {
+    type: 'SelectControl',
+    label: t('X Tick Layout'),
+    choices: formatSelectOptions(['auto', 'flat', '45°', 'staggered']),
+    default: 'auto',
+    clearable: false,
+    renderTrigger: true,
+    description: t('The way the ticks are laid out on the X-axis'),
+  },
+};
+
+export const xAxisFormat = {
+  name: 'x_axis_format',
+  config: {
+    type: 'SelectControl',
+    freeForm: true,
+    label: t('X Axis Format'),
+    renderTrigger: true,
+    choices: D3_TIME_FORMAT_OPTIONS,
+    default: 'smart_date',
+    description: D3_FORMAT_DOCS,
+  },
+};
+
+export const yLogScale = {
+  name: 'y_log_scale',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Y Log Scale'),
+    default: false,
+    renderTrigger: true,
+    description: t('Use a log scale for the Y-axis'),
+  },
+};
+
+export const yAxisBounds = {
+  name: 'y_axis_bounds',
+  config: {
+    type: 'BoundsControl',
+    label: t('Y Axis Bounds'),
+    renderTrigger: true,
+    default: [null, null],
+    description: t(
+      'Bounds for the Y-axis. When left empty, the bounds are ' +
+        'dynamically defined based on the min/max of the data. Note that ' +
+        "this feature will only expand the axis range. It won't " +
+        "narrow the data's extent.",
+    ),
+  },
+};
+
+export const xAxisShowMinmax = {
+  name: 'x_axis_showminmax',
+  config: {
+    type: 'CheckboxControl',
+    label: t('X bounds'),
+    renderTrigger: true,
+    default: false,
+    description: t('Whether to display the min and max values of the X-axis'),
+  },
+};
+
+export const richTooltip = {
+  name: 'rich_tooltip',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Rich Tooltip'),
+    renderTrigger: true,
+    default: true,
+    description: t('The rich tooltip shows a list of all series for that point in time'),
+  },
+};
+
+export const showBarValue = {
+  name: 'show_bar_value',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Bar Values'),
+    default: false,
+    renderTrigger: true,
+    description: t('Show the value on top of the bar'),
+  },
+};
+
+export const barStacked = {
+  name: 'bar_stacked',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Stacked Bars'),
+    renderTrigger: true,
+    default: false,
+    description: null,
+  },
+};
+
+export const reduceXTicks = {
+  name: 'reduce_x_ticks',
+  config: {
+    type: 'CheckboxControl',
+    label: t('Reduce X ticks'),
+    renderTrigger: true,
+    default: false,
+    description: t(
+      'Reduces the number of X-axis ticks to be rendered. ' +
+        'If true, the x-axis will not overflow and labels may be ' +
+        'missing. If false, a minimum width will be applied ' +
+        'to columns and the width may overflow into an ' +
+        'horizontal scroll.',
+    ),
+  },
+};
+
+export const yAxisLabel = {
+  name: 'y_axis_label',
+  config: {
+    type: 'TextControl',
+    label: t('Y Axis Label'),
+    renderTrigger: true,
+    default: '',
+  },
+};