[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,
},

View File

@@ -1,3 +1,5 @@
import { D3_TIME_FORMAT_OPTIONS } from './controls';
export const sections = {
druidTimeSeries: {
label: 'Time',
@@ -143,6 +145,11 @@ const visTypes = {
},
sections.NVD3TimeSeries[1],
],
controlOverrides: {
x_axis_format: {
choices: D3_TIME_FORMAT_OPTIONS,
},
},
},
dual_line: {
@@ -158,15 +165,13 @@ const visTypes = {
{
label: 'Y Axis 1',
controlSetRows: [
['metric'],
['y_axis_format'],
['metric', 'y_axis_format'],
],
},
{
label: 'Y Axis 2',
controlSetRows: [
['metric_2'],
['y_axis_2_format'],
['metric_2', 'y_axis_2_format'],
],
},
],
@@ -410,19 +415,41 @@ const visTypes = {
label: null,
controlSetRows: [
['series', 'entity'],
['x', 'y'],
['size', 'limit'],
],
},
{
label: 'Chart Options',
controlSetRows: [
['show_legend', 'max_bubble_size'],
['x_axis_label', 'y_axis_label'],
['x_log_scale', 'y_log_scale'],
['show_legend', null],
],
},
{
label: 'Bubbles',
controlSetRows: [
['size', 'max_bubble_size'],
],
},
{
label: 'X Axis',
controlSetRows: [
['x', 'x_axis_format'],
['x_axis_label', 'x_log_scale'],
],
},
{
label: 'Y Axis',
controlSetRows: [
['y', 'y_axis_format'],
['y_axis_label', 'y_log_scale'],
],
},
],
controlOverrides: {
x_axis_format: {
default: '.3s',
},
},
},
bullet: {