[explore] improve bubble viz (#2927)

* [explore] improve bubble viz

* allow for custom axis formatters
* reorg the control panels

* Addressing comments
This commit is contained in:
Maxime Beauchemin
2017-06-19 22:09:09 -07:00
committed by GitHub
parent 591e512327
commit 3e51c61dbf
7 changed files with 116 additions and 67 deletions

View File

@@ -7,7 +7,7 @@ import ColumnOption from '../../components/ColumnOption';
const D3_FORMAT_DOCS = 'D3 format syntax: https://github.com/d3/d3-format';
// input choices & options
const D3_TIME_FORMAT_OPTIONS = [
const D3_FORMAT_OPTIONS = [
['.3s', '.3s | 12.3k'],
['.3%', '.3% | 1234543.210%'],
['.4r', '.4r | 12350'],
@@ -20,8 +20,7 @@ const ROW_LIMIT_OPTIONS = [10, 50, 100, 250, 500, 1000, 5000, 10000, 50000];
const SERIES_LIMITS = [0, 5, 10, 25, 50, 100, 500];
export const TIME_STAMP_OPTIONS = [
export const D3_TIME_FORMAT_OPTIONS = [
['smart_date', 'Adaptative formating'],
['%m/%d/%Y', '%m/%d/%Y | 01/14/2019'],
['%Y-%m-%d', '%Y-%m-%d | 2019-01-14'],
@@ -594,7 +593,7 @@ export const controls = {
label: 'Number format',
renderTrigger: true,
default: '.3s',
choices: D3_TIME_FORMAT_OPTIONS,
choices: D3_FORMAT_OPTIONS,
description: D3_FORMAT_DOCS,
},
@@ -682,8 +681,8 @@ export const controls = {
type: 'SelectControl',
label: 'Y Axis',
default: null,
description: 'Metric assigned to the [Y] axis',
validators: [v.nonEmpty],
description: 'Metric assigned to the [Y] axis',
optionRenderer: m => <MetricOption metric={m} />,
valueRenderer: m => <MetricOption metric={m} />,
valueKey: 'metric_name',
@@ -765,7 +764,7 @@ export const controls = {
freeForm: true,
label: 'Table Timestamp Format',
default: 'smart_date',
choices: TIME_STAMP_OPTIONS,
choices: D3_TIME_FORMAT_OPTIONS,
description: 'Timestamp Format',
},
@@ -788,12 +787,22 @@ export const controls = {
},
x_axis_format: {
type: 'SelectControl',
freeForm: true,
label: 'X Axis Format',
renderTrigger: true,
default: '.3s',
choices: D3_FORMAT_OPTIONS,
description: D3_FORMAT_DOCS,
},
x_axis_time_format: {
type: 'SelectControl',
freeForm: true,
label: 'X Axis Format',
renderTrigger: true,
default: 'smart_date',
choices: TIME_STAMP_OPTIONS,
choices: D3_TIME_FORMAT_OPTIONS,
description: D3_FORMAT_DOCS,
},
@@ -803,7 +812,7 @@ export const controls = {
label: 'Y Axis Format',
renderTrigger: true,
default: '.3s',
choices: D3_TIME_FORMAT_OPTIONS,
choices: D3_FORMAT_OPTIONS,
description: D3_FORMAT_DOCS,
},
@@ -812,7 +821,7 @@ export const controls = {
freeForm: true,
label: 'Right Axis Format',
default: '.3s',
choices: D3_TIME_FORMAT_OPTIONS,
choices: D3_FORMAT_OPTIONS,
description: D3_FORMAT_DOCS,
},