mirror of
https://github.com/apache/superset.git
synced 2026-04-19 16:14:52 +00:00
refactor(monorepo): move superset-ui to superset(stage 2) (#17552)
This commit is contained in:
Yongjie Zhao
@@ -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.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
ColumnMeta,
|
||||
InfoTooltipWithTrigger,
|
||||
} from '@superset-ui/chart-controls';
|
||||
|
||||
const propTypes = {
|
||||
option: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
// This component provides a general tooltip for options
|
||||
// in a SelectControl
|
||||
export default function OptionDescription({ option }: { option: ColumnMeta }) {
|
||||
return (
|
||||
<span>
|
||||
<span className="m-r-5 option-label">{option.label}</span>
|
||||
{option.description && (
|
||||
<InfoTooltipWithTrigger
|
||||
className="m-r-5 text-muted"
|
||||
icon="question-circle-o"
|
||||
tooltip={option.description}
|
||||
label={`descr-${option.label}`}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
OptionDescription.propTypes = propTypes;
|
||||
@@ -0,0 +1,64 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
.superset-legacy-chart-partition {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.superset-legacy-chart-partition .chart {
|
||||
display: block;
|
||||
margin: auto;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.superset-legacy-chart-partition rect {
|
||||
stroke: #eee;
|
||||
fill: #aaa;
|
||||
fill-opacity: 0.8;
|
||||
transition: fill-opacity 180ms linear;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.superset-legacy-chart-partition rect:hover {
|
||||
fill-opacity: 1;
|
||||
}
|
||||
|
||||
.superset-legacy-chart-partition g text {
|
||||
font-weight: bold;
|
||||
fill: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.superset-legacy-chart-partition g:hover text {
|
||||
fill: rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
.superset-legacy-chart-partition .partition-tooltip {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
padding: 5px;
|
||||
pointer-events: none;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.partition-tooltip td {
|
||||
padding-left: 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
@@ -0,0 +1,402 @@
|
||||
/* eslint-disable react/sort-prop-types */
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
/* eslint no-param-reassign: [2, {"props": false}] */
|
||||
import d3 from 'd3';
|
||||
import PropTypes from 'prop-types';
|
||||
import { hierarchy } from 'd3-hierarchy';
|
||||
import {
|
||||
getNumberFormatter,
|
||||
getTimeFormatter,
|
||||
CategoricalColorNamespace,
|
||||
} from '@superset-ui/core';
|
||||
import './Partition.css';
|
||||
|
||||
// Compute dx, dy, x, y for each node and
|
||||
// return an array of nodes in breadth-first order
|
||||
function init(root) {
|
||||
const flat = [];
|
||||
const dy = 1 / (root.height + 1);
|
||||
let prev = null;
|
||||
root.each(n => {
|
||||
n.y = dy * n.depth;
|
||||
n.dy = dy;
|
||||
if (n.parent) {
|
||||
n.x = prev.depth === n.parent.depth ? 0 : prev.x + prev.dx;
|
||||
n.dx = (n.weight / n.parent.sum) * n.parent.dx;
|
||||
} else {
|
||||
n.x = 0;
|
||||
n.dx = 1;
|
||||
}
|
||||
prev = n;
|
||||
flat.push(n);
|
||||
});
|
||||
|
||||
return flat;
|
||||
}
|
||||
|
||||
// Declare PropTypes for recursive data structures
|
||||
// https://github.com/facebook/react/issues/5676
|
||||
/* eslint-disable-next-line no-undef */
|
||||
const lazyFunction = f => () => f().apply(this, arguments);
|
||||
const leafType = PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
val: PropTypes.number.isRequired,
|
||||
});
|
||||
const parentShape = {
|
||||
name: PropTypes.string,
|
||||
val: PropTypes.number.isRequired,
|
||||
children: PropTypes.arrayOf(
|
||||
PropTypes.oneOfType([
|
||||
PropTypes.shape(lazyFunction(() => parentShape)),
|
||||
leafType,
|
||||
]),
|
||||
),
|
||||
};
|
||||
const nodeType = PropTypes.oneOfType([PropTypes.shape(parentShape), leafType]);
|
||||
|
||||
const propTypes = {
|
||||
data: PropTypes.arrayOf(nodeType), // array of rootNode
|
||||
width: PropTypes.number,
|
||||
height: PropTypes.number,
|
||||
colorScheme: PropTypes.string,
|
||||
dateTimeFormat: PropTypes.string,
|
||||
equalDateSize: PropTypes.bool,
|
||||
levels: PropTypes.arrayOf(PropTypes.string),
|
||||
metrics: PropTypes.arrayOf(
|
||||
PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||
),
|
||||
numberFormat: PropTypes.string,
|
||||
partitionLimit: PropTypes.number,
|
||||
partitionThreshold: PropTypes.number,
|
||||
timeSeriesOption: PropTypes.string,
|
||||
useLogScale: PropTypes.bool,
|
||||
useRichTooltip: PropTypes.bool,
|
||||
};
|
||||
|
||||
function getAncestors(d) {
|
||||
const ancestors = [d];
|
||||
let node = d;
|
||||
while (node.parent) {
|
||||
ancestors.push(node.parent);
|
||||
node = node.parent;
|
||||
}
|
||||
|
||||
return ancestors;
|
||||
}
|
||||
|
||||
// This vis is based on
|
||||
// http://mbostock.github.io/d3/talk/20111018/partition.html
|
||||
function Icicle(element, props) {
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
data,
|
||||
colorScheme,
|
||||
dateTimeFormat,
|
||||
equalDateSize,
|
||||
levels,
|
||||
useLogScale = false,
|
||||
metrics = [],
|
||||
numberFormat,
|
||||
partitionLimit,
|
||||
partitionThreshold,
|
||||
useRichTooltip,
|
||||
timeSeriesOption = 'not_time',
|
||||
} = props;
|
||||
|
||||
const div = d3.select(element);
|
||||
div.classed('superset-legacy-chart-partition', true);
|
||||
|
||||
// Chart options
|
||||
const chartType = timeSeriesOption;
|
||||
const hasTime = ['adv_anal', 'time_series'].includes(chartType);
|
||||
const format = getNumberFormatter(numberFormat);
|
||||
const timeFormat = getTimeFormatter(dateTimeFormat);
|
||||
const colorFn = CategoricalColorNamespace.getScale(colorScheme);
|
||||
|
||||
div.selectAll('*').remove();
|
||||
const tooltip = div.append('div').classed('partition-tooltip', true);
|
||||
|
||||
function hasDateNode(n) {
|
||||
return metrics.includes(n.data.name) && hasTime;
|
||||
}
|
||||
|
||||
function getCategory(depth) {
|
||||
if (!depth) {
|
||||
return 'Metric';
|
||||
}
|
||||
if (hasTime && depth === 1) {
|
||||
return 'Date';
|
||||
}
|
||||
|
||||
return levels[depth - (hasTime ? 2 : 1)];
|
||||
}
|
||||
|
||||
function drawVis(i, dat) {
|
||||
const datum = dat[i];
|
||||
const w = width;
|
||||
const h = height / data.length;
|
||||
const x = d3.scale.linear().range([0, w]);
|
||||
const y = d3.scale.linear().range([0, h]);
|
||||
|
||||
const viz = div
|
||||
.append('div')
|
||||
.attr('class', 'chart')
|
||||
.style('width', `${w}px`)
|
||||
.style('height', `${h}px`)
|
||||
.append('svg:svg')
|
||||
.attr('width', w)
|
||||
.attr('height', h);
|
||||
|
||||
// Add padding between multiple visualizations
|
||||
if (i !== data.length - 1 && data.length > 1) {
|
||||
viz.style('padding-bottom', '3px');
|
||||
}
|
||||
if (i !== 0 && data.length > 1) {
|
||||
viz.style('padding-top', '3px');
|
||||
}
|
||||
|
||||
const root = hierarchy(datum);
|
||||
|
||||
// node.name is the metric/group name
|
||||
// node.disp is the display value
|
||||
// node.value determines sorting order
|
||||
// node.weight determines partition height
|
||||
// node.sum is the sum of children weights
|
||||
root.eachAfter(n => {
|
||||
n.disp = n.data.val;
|
||||
n.value = n.disp < 0 ? -n.disp : n.disp;
|
||||
n.weight = n.value;
|
||||
n.name = n.data.name;
|
||||
// If the parent is a metric and we still have
|
||||
// the time column, perform a date-time format
|
||||
if (n.parent && hasDateNode(n.parent)) {
|
||||
// Format timestamp values
|
||||
n.weight = equalDateSize ? 1 : n.value;
|
||||
n.value = n.name;
|
||||
n.name = timeFormat(n.name);
|
||||
}
|
||||
if (useLogScale) n.weight = Math.log(n.weight + 1);
|
||||
n.disp =
|
||||
n.disp && !Number.isNaN(n.disp) && Number.isFinite(n.disp)
|
||||
? format(n.disp)
|
||||
: '';
|
||||
});
|
||||
// Perform sort by weight
|
||||
root.sort((a, b) => {
|
||||
const v = b.value - a.value;
|
||||
if (v === 0) {
|
||||
return b.name > a.name ? 1 : -1;
|
||||
}
|
||||
|
||||
return v;
|
||||
});
|
||||
|
||||
// Prune data based on partition limit and threshold
|
||||
// both are applied at the same time
|
||||
if (partitionThreshold && partitionThreshold >= 0) {
|
||||
// Compute weight sums as we go
|
||||
root.each(n => {
|
||||
n.sum = n.children
|
||||
? n.children.reduce((a, v) => a + v.weight, 0) || 1
|
||||
: 1;
|
||||
if (n.children) {
|
||||
// Dates are not ordered by weight
|
||||
if (hasDateNode(n)) {
|
||||
if (equalDateSize) {
|
||||
return;
|
||||
}
|
||||
const removeIndices = [];
|
||||
// Keep at least one child
|
||||
for (let j = 1; j < n.children.length; j += 1) {
|
||||
if (n.children[j].weight / n.sum < partitionThreshold) {
|
||||
removeIndices.push(j);
|
||||
}
|
||||
}
|
||||
for (let j = removeIndices.length - 1; j >= 0; j -= 1) {
|
||||
n.children.splice(removeIndices[j], 1);
|
||||
}
|
||||
} else {
|
||||
// Find first child that falls below the threshold
|
||||
let j;
|
||||
for (j = 1; j < n.children.length; j += 1) {
|
||||
if (n.children[j].weight / n.sum < partitionThreshold) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
n.children = n.children.slice(0, j);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
if (partitionLimit && partitionLimit >= 0) {
|
||||
root.each(n => {
|
||||
if (n.children && n.children.length > partitionLimit) {
|
||||
if (!hasDateNode(n)) {
|
||||
n.children = n.children.slice(0, partitionLimit);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// Compute final weight sums
|
||||
root.eachAfter(n => {
|
||||
n.sum = n.children
|
||||
? n.children.reduce((a, v) => a + v.weight, 0) || 1
|
||||
: 1;
|
||||
});
|
||||
|
||||
function positionAndPopulate(tip, d) {
|
||||
let t = '<table>';
|
||||
if (useRichTooltip) {
|
||||
const nodes = getAncestors(d);
|
||||
nodes.reverse().forEach(n => {
|
||||
const atNode = n.depth === d.depth;
|
||||
t += '<tbody>';
|
||||
t +=
|
||||
'<tr>' +
|
||||
'<td>' +
|
||||
'<div ' +
|
||||
`style='border: 2px solid ${atNode ? 'black' : 'transparent'};` +
|
||||
`background-color: ${n.color};'` +
|
||||
'></div>' +
|
||||
'</td>' +
|
||||
`<td>${getCategory(n.depth)}</td>` +
|
||||
`<td>${n.name}</td>` +
|
||||
`<td>${n.disp}</td>` +
|
||||
'</tr>';
|
||||
});
|
||||
} else {
|
||||
t +=
|
||||
'<thead><tr><td colspan="3">' +
|
||||
`<strong>${getCategory(d.depth)}</strong>` +
|
||||
'</td></tr></thead><tbody>';
|
||||
t +=
|
||||
'<tr>' +
|
||||
'<td>' +
|
||||
`<div style='border: thin solid grey; background-color: ${d.color};'` +
|
||||
'></div>' +
|
||||
'</td>' +
|
||||
`<td>${d.name}</td>` +
|
||||
`<td>${d.disp}</td>` +
|
||||
'</tr>';
|
||||
}
|
||||
t += '</tbody></table>';
|
||||
const [tipX, tipY] = d3.mouse(element);
|
||||
tip
|
||||
.html(t)
|
||||
.style('left', `${tipX + 15}px`)
|
||||
.style('top', `${tipY}px`);
|
||||
}
|
||||
|
||||
const nodes = init(root);
|
||||
|
||||
let zoomX = w / root.dx;
|
||||
let zoomY = h / 1;
|
||||
|
||||
// Keep text centered in its division
|
||||
function transform(d) {
|
||||
return `translate(8,${(d.dx * zoomY) / 2})`;
|
||||
}
|
||||
|
||||
const g = viz
|
||||
.selectAll('g')
|
||||
.data(nodes)
|
||||
.enter()
|
||||
.append('svg:g')
|
||||
.attr('transform', d => `translate(${x(d.y)},${y(d.x)})`)
|
||||
.on('mouseover', d => {
|
||||
tooltip.interrupt().transition().duration(100).style('opacity', 0.9);
|
||||
positionAndPopulate(tooltip, d);
|
||||
})
|
||||
.on('mousemove', d => {
|
||||
positionAndPopulate(tooltip, d);
|
||||
})
|
||||
.on('mouseout', () => {
|
||||
tooltip.interrupt().transition().duration(250).style('opacity', 0);
|
||||
});
|
||||
|
||||
// When clicking a subdivision, the vis will zoom in to it
|
||||
function click(d) {
|
||||
if (!d.children) {
|
||||
if (d.parent) {
|
||||
// Clicking on the rightmost level should zoom in
|
||||
return click(d.parent);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
zoomX = (d.y ? w - 40 : w) / (1 - d.y);
|
||||
zoomY = h / d.dx;
|
||||
x.domain([d.y, 1]).range([d.y ? 40 : 0, w]);
|
||||
y.domain([d.x, d.x + d.dx]);
|
||||
|
||||
const t = g
|
||||
.transition()
|
||||
.duration(d3.event.altKey ? 7500 : 750)
|
||||
.attr('transform', nd => `translate(${x(nd.y)},${y(nd.x)})`);
|
||||
|
||||
t.select('rect')
|
||||
.attr('width', d.dy * zoomX)
|
||||
.attr('height', nd => nd.dx * zoomY);
|
||||
|
||||
t.select('text')
|
||||
.attr('transform', transform)
|
||||
.style('opacity', nd => (nd.dx * zoomY > 12 ? 1 : 0));
|
||||
|
||||
d3.event.stopPropagation();
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
g.on('click', click);
|
||||
|
||||
g.append('svg:rect')
|
||||
.attr('width', root.dy * zoomX)
|
||||
.attr('height', d => d.dx * zoomY);
|
||||
|
||||
g.append('svg:text')
|
||||
.attr('transform', transform)
|
||||
.attr('dy', '0.35em')
|
||||
.style('opacity', d => (d.dx * zoomY > 12 ? 1 : 0))
|
||||
.text(d => {
|
||||
if (!d.disp) {
|
||||
return d.name;
|
||||
}
|
||||
|
||||
return `${d.name}: ${d.disp}`;
|
||||
});
|
||||
|
||||
// Apply color scheme
|
||||
g.selectAll('rect').style('fill', d => {
|
||||
d.color = colorFn(d.name);
|
||||
|
||||
return d.color;
|
||||
});
|
||||
}
|
||||
|
||||
for (let i = 0; i < data.length; i += 1) {
|
||||
drawVis(i, data);
|
||||
}
|
||||
}
|
||||
|
||||
Icicle.displayName = 'Icicle';
|
||||
Icicle.propTypes = propTypes;
|
||||
|
||||
export default Icicle;
|
||||
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* 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 { reactify } from '@superset-ui/core';
|
||||
import Component from './Partition';
|
||||
|
||||
export default reactify(Component);
|
||||
@@ -0,0 +1,397 @@
|
||||
/**
|
||||
* 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 React from 'react';
|
||||
import { t, validateNonEmpty } from '@superset-ui/core';
|
||||
import {
|
||||
ColumnMeta,
|
||||
ControlPanelConfig,
|
||||
D3_FORMAT_DOCS,
|
||||
D3_FORMAT_OPTIONS,
|
||||
D3_TIME_FORMAT_OPTIONS,
|
||||
formatSelectOptions,
|
||||
sections,
|
||||
} from '@superset-ui/chart-controls';
|
||||
import OptionDescription from './OptionDescription';
|
||||
|
||||
const config: ControlPanelConfig = {
|
||||
controlPanelSections: [
|
||||
sections.legacyRegularTime,
|
||||
{
|
||||
label: t('Query'),
|
||||
expanded: true,
|
||||
controlSetRows: [
|
||||
['metrics'],
|
||||
['adhoc_filters'],
|
||||
['groupby'],
|
||||
['limit', 'timeseries_limit_metric'],
|
||||
[
|
||||
{
|
||||
name: 'order_desc',
|
||||
config: {
|
||||
type: 'CheckboxControl',
|
||||
label: t('Sort Descending'),
|
||||
default: true,
|
||||
description: t('Whether to sort descending or ascending'),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'contribution',
|
||||
config: {
|
||||
type: 'CheckboxControl',
|
||||
label: t('Contribution'),
|
||||
default: false,
|
||||
description: t('Compute the contribution to the total'),
|
||||
},
|
||||
},
|
||||
],
|
||||
['row_limit', null],
|
||||
],
|
||||
},
|
||||
{
|
||||
label: t('Time Series Options'),
|
||||
expanded: true,
|
||||
controlSetRows: [
|
||||
[
|
||||
{
|
||||
name: 'time_series_option',
|
||||
config: {
|
||||
type: 'SelectControl',
|
||||
label: t('Options'),
|
||||
validators: [validateNonEmpty],
|
||||
default: 'not_time',
|
||||
valueKey: 'value',
|
||||
options: [
|
||||
{
|
||||
label: t('Not Time Series'),
|
||||
value: 'not_time',
|
||||
description: t('Ignore time'),
|
||||
},
|
||||
{
|
||||
label: t('Time Series'),
|
||||
value: 'time_series',
|
||||
description: t('Standard time series'),
|
||||
},
|
||||
{
|
||||
label: t('Aggregate Mean'),
|
||||
value: 'agg_mean',
|
||||
description: t('Mean of values over specified period'),
|
||||
},
|
||||
{
|
||||
label: t('Aggregate Sum'),
|
||||
value: 'agg_sum',
|
||||
description: t('Sum of values over specified period'),
|
||||
},
|
||||
{
|
||||
label: t('Difference'),
|
||||
value: 'point_diff',
|
||||
description: t(
|
||||
'Metric change in value from `since` to `until`',
|
||||
),
|
||||
},
|
||||
{
|
||||
label: t('Percent Change'),
|
||||
value: 'point_percent',
|
||||
description: t(
|
||||
'Metric percent change in value from `since` to `until`',
|
||||
),
|
||||
},
|
||||
{
|
||||
label: t('Factor'),
|
||||
value: 'point_factor',
|
||||
description: t(
|
||||
'Metric factor change from `since` to `until`',
|
||||
),
|
||||
},
|
||||
{
|
||||
label: t('Advanced Analytics'),
|
||||
value: 'adv_anal',
|
||||
description: t('Use the Advanced Analytics options below'),
|
||||
},
|
||||
],
|
||||
optionRenderer: (op: ColumnMeta) => (
|
||||
<OptionDescription option={op} />
|
||||
),
|
||||
valueRenderer: (op: ColumnMeta) => (
|
||||
<OptionDescription option={op} />
|
||||
),
|
||||
description: t('Settings for time series'),
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
{
|
||||
label: t('Chart Options'),
|
||||
expanded: true,
|
||||
tabOverride: 'customize',
|
||||
controlSetRows: [
|
||||
['color_scheme'],
|
||||
[
|
||||
{
|
||||
name: 'number_format',
|
||||
config: {
|
||||
type: 'SelectControl',
|
||||
freeForm: true,
|
||||
label: t('Number format'),
|
||||
renderTrigger: true,
|
||||
default: 'SMART_NUMBER',
|
||||
choices: D3_FORMAT_OPTIONS,
|
||||
description: D3_FORMAT_DOCS,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'date_time_format',
|
||||
config: {
|
||||
type: 'SelectControl',
|
||||
freeForm: true,
|
||||
label: t('Date Time Format'),
|
||||
renderTrigger: true,
|
||||
default: 'smart_date',
|
||||
choices: D3_TIME_FORMAT_OPTIONS,
|
||||
description: D3_FORMAT_DOCS,
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: 'partition_limit',
|
||||
config: {
|
||||
type: 'TextControl',
|
||||
label: t('Partition Limit'),
|
||||
isInt: true,
|
||||
default: '5',
|
||||
description: t(
|
||||
'The maximum number of subdivisions of each group; ' +
|
||||
'lower values are pruned first',
|
||||
),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'partition_threshold',
|
||||
config: {
|
||||
type: 'TextControl',
|
||||
label: t('Partition Threshold'),
|
||||
isFloat: true,
|
||||
default: '0.05',
|
||||
description: t(
|
||||
'Partitions whose height to parent height proportions are ' +
|
||||
'below this value are pruned',
|
||||
),
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: 'log_scale',
|
||||
config: {
|
||||
type: 'CheckboxControl',
|
||||
label: t('Log Scale'),
|
||||
default: false,
|
||||
renderTrigger: true,
|
||||
description: t('Use a log scale'),
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: 'equal_date_size',
|
||||
config: {
|
||||
type: 'CheckboxControl',
|
||||
label: t('Equal Date Sizes'),
|
||||
default: true,
|
||||
renderTrigger: true,
|
||||
description: t(
|
||||
'Check to force date partitions to have the same height',
|
||||
),
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
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',
|
||||
),
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
{
|
||||
label: t('Advanced Analytics'),
|
||||
tabOverride: 'data',
|
||||
description: t(
|
||||
'This section contains options ' +
|
||||
'that allow for advanced analytical post processing ' +
|
||||
'of query results',
|
||||
),
|
||||
controlSetRows: [
|
||||
// eslint-disable-next-line react/jsx-key
|
||||
[<h1 className="section-header">{t('Rolling Window')}</h1>],
|
||||
[
|
||||
{
|
||||
name: 'rolling_type',
|
||||
config: {
|
||||
type: 'SelectControl',
|
||||
label: t('Rolling Function'),
|
||||
default: 'None',
|
||||
choices: formatSelectOptions([
|
||||
'None',
|
||||
'mean',
|
||||
'sum',
|
||||
'std',
|
||||
'cumsum',
|
||||
]),
|
||||
description: t(
|
||||
'Defines a rolling window function to apply, works along ' +
|
||||
'with the [Periods] text box',
|
||||
),
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: 'rolling_periods',
|
||||
config: {
|
||||
type: 'TextControl',
|
||||
label: t('Periods'),
|
||||
isInt: true,
|
||||
description: t(
|
||||
'Defines the size of the rolling window function, ' +
|
||||
'relative to the time granularity selected',
|
||||
),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'min_periods',
|
||||
config: {
|
||||
type: 'TextControl',
|
||||
label: t('Min Periods'),
|
||||
isInt: true,
|
||||
description: t(
|
||||
'The minimum number of rolling periods required to show ' +
|
||||
'a value. For instance if you do a cumulative sum on 7 days ' +
|
||||
'you may want your "Min Period" to be 7, so that all data points ' +
|
||||
'shown are the total of 7 periods. This will hide the "ramp up" ' +
|
||||
'taking place over the first 7 periods',
|
||||
),
|
||||
},
|
||||
},
|
||||
],
|
||||
// eslint-disable-next-line react/jsx-key
|
||||
[<h1 className="section-header">{t('Time Comparison')}</h1>],
|
||||
[
|
||||
{
|
||||
name: 'time_compare',
|
||||
config: {
|
||||
type: 'SelectControl',
|
||||
multi: true,
|
||||
freeForm: true,
|
||||
label: t('Time Shift'),
|
||||
choices: formatSelectOptions([
|
||||
'1 day',
|
||||
'1 week',
|
||||
'28 days',
|
||||
'30 days',
|
||||
'52 weeks',
|
||||
'1 year',
|
||||
'104 weeks',
|
||||
'2 years',
|
||||
]),
|
||||
description: t(
|
||||
'Overlay one or more timeseries from a ' +
|
||||
'relative time period. Expects relative time deltas ' +
|
||||
'in natural language (example: 24 hours, 7 days, ' +
|
||||
'52 weeks, 365 days). Free text is supported.',
|
||||
),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'comparison_type',
|
||||
config: {
|
||||
type: 'SelectControl',
|
||||
label: t('Calculation type'),
|
||||
default: 'values',
|
||||
choices: [
|
||||
['values', 'Actual Values'],
|
||||
['absolute', 'Difference'],
|
||||
['percentage', 'Percentage change'],
|
||||
['ratio', 'Ratio'],
|
||||
],
|
||||
description: t(
|
||||
'How to display time shifts: as individual lines; as the ' +
|
||||
'difference between the main time series and each time shift; ' +
|
||||
'as the percentage change; or as the ratio between series and time shifts.',
|
||||
),
|
||||
},
|
||||
},
|
||||
],
|
||||
// eslint-disable-next-line react/jsx-key
|
||||
[<h1 className="section-header">{t('Python Functions')}</h1>],
|
||||
// eslint-disable-next-line react/jsx-key
|
||||
[<h2 className="section-header">pandas.resample</h2>],
|
||||
[
|
||||
{
|
||||
name: 'resample_rule',
|
||||
config: {
|
||||
type: 'SelectControl',
|
||||
freeForm: true,
|
||||
label: t('Rule'),
|
||||
default: null,
|
||||
choices: formatSelectOptions([
|
||||
'1T',
|
||||
'1H',
|
||||
'1D',
|
||||
'7D',
|
||||
'1M',
|
||||
'1AS',
|
||||
]),
|
||||
description: t('Pandas resample rule'),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'resample_method',
|
||||
config: {
|
||||
type: 'SelectControl',
|
||||
freeForm: true,
|
||||
label: t('Method'),
|
||||
default: null,
|
||||
choices: formatSelectOptions([
|
||||
'asfreq',
|
||||
'bfill',
|
||||
'ffill',
|
||||
'median',
|
||||
'mean',
|
||||
'sum',
|
||||
]),
|
||||
description: t('Pandas resample method'),
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default config;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
@@ -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.
|
||||
*/
|
||||
import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
|
||||
import transformProps from './transformProps';
|
||||
import thumbnail from './images/thumbnail.png';
|
||||
import controlPanel from './controlPanel';
|
||||
|
||||
const metadata = new ChartMetadata({
|
||||
category: t('Part of a Whole'),
|
||||
description: t('Compare the same summarized metric across multiple groups.'),
|
||||
name: t('Partition Chart'),
|
||||
tags: [t('Categorical'), t('Comparison'), t('Legacy'), t('Proportional')],
|
||||
thumbnail,
|
||||
useLegacyApi: true,
|
||||
});
|
||||
|
||||
export default class PartitionChartPlugin extends ChartPlugin {
|
||||
constructor() {
|
||||
super({
|
||||
loadChart: () => import('./ReactPartition'),
|
||||
metadata,
|
||||
transformProps,
|
||||
controlPanel,
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
export default function transformProps(chartProps) {
|
||||
const { width, height, datasource, formData, queriesData } = chartProps;
|
||||
const {
|
||||
colorScheme,
|
||||
dateTimeFormat,
|
||||
equalDateSize,
|
||||
groupby,
|
||||
logScale,
|
||||
metrics,
|
||||
numberFormat,
|
||||
partitionLimit,
|
||||
partitionThreshold,
|
||||
richTooltip,
|
||||
timeSeriesOption,
|
||||
} = formData;
|
||||
const { verboseMap } = datasource;
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
data: queriesData[0].data,
|
||||
colorScheme,
|
||||
dateTimeFormat,
|
||||
equalDateSize,
|
||||
levels: groupby.map(g => verboseMap[g] || g),
|
||||
metrics,
|
||||
numberFormat,
|
||||
partitionLimit: partitionLimit && parseInt(partitionLimit, 10),
|
||||
partitionThreshold: partitionThreshold && parseInt(partitionThreshold, 10),
|
||||
timeSeriesOption,
|
||||
useLogScale: logScale,
|
||||
useRichTooltip: richTooltip,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user