Skip to content

Commit

Permalink
Merge pull request apache#101 from kristw/kristw-cherry-aug27v2
Browse files Browse the repository at this point in the history
Cherry-picks: Sunburst, Horizon, Treemap and a few small updates from community
  • Loading branch information
kristw authored Aug 27, 2018
2 parents f06365d + f95bf14 commit 424ddce
Show file tree
Hide file tree
Showing 21 changed files with 696 additions and 505 deletions.
1 change: 0 additions & 1 deletion superset/assets/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@
"geojson-extent": "^0.3.2",
"geolib": "^2.0.24",
"immutable": "^3.8.2",
"is-react": "^1.1.1",
"jed": "^1.1.1",
"jquery": "3.1.1",
"lodash.throttle": "^4.1.1",
Expand Down
10 changes: 0 additions & 10 deletions superset/assets/src/chart/Chart.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/* eslint no-undef: 2 */
import React from 'react';
import PropTypes from 'prop-types';
import Mustache from 'mustache';
import { Tooltip } from 'react-bootstrap';

import { d3format } from '../modules/utils';
Expand Down Expand Up @@ -183,15 +182,6 @@ class Chart extends React.PureComponent {
return this.props.datasource.verbose_map[metric] || metric;
}

// eslint-disable-next-line camelcase
render_template(s) {
const context = {
width: this.width(),
height: this.height(),
};
return Mustache.render(s, context);
}

renderTooltip() {
if (this.state.tooltip) {
return (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/* eslint camelcase: 0 */
import React from 'react';
import isReact from 'is-react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
Expand All @@ -11,6 +10,7 @@ import ControlRow from './ControlRow';
import Control from './Control';
import controls from '../controls';
import * as actions from '../actions/exploreActions';
import { t } from '../../locales';

const propTypes = {
actions: PropTypes.object.isRequired,
Expand All @@ -30,7 +30,7 @@ class ControlPanelsContainer extends React.Component {
this.renderControlPanelSection = this.renderControlPanelSection.bind(this);
}
getControlData(controlName) {
if (isReact.element(controlName)) {
if (React.isValidElement(controlName)) {
return controlName;
}

Expand Down Expand Up @@ -77,7 +77,7 @@ class ControlPanelsContainer extends React.Component {
controls={controlSets.map((controlName) => {
if (!controlName) {
return null;
} else if (isReact.element(controlName)) {
} else if (React.isValidElement(controlName)) {
return controlName;
} else if (ctrls[controlName]) {
return (<Control
Expand Down Expand Up @@ -134,7 +134,7 @@ class ControlPanelsContainer extends React.Component {
{querySectionsToRender.map(this.renderControlPanelSection)}
</Tab>
{displaySectionsToRender.length > 0 &&
<Tab eventKey="display" title="Style">
<Tab eventKey="display" title={t('Visual Properties')}>
{displaySectionsToRender.map(this.renderControlPanelSection)}
</Tab>
}
Expand Down
9 changes: 7 additions & 2 deletions superset/assets/src/explore/controls.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -345,14 +345,15 @@ export const controls = {

horizon_color_scale: {
type: 'SelectControl',
label: t('Horizon Color Scale'),
renderTrigger: true,
label: t('Value Domain'),
choices: [
['series', 'series'],
['overall', 'overall'],
['change', 'change'],
],
default: 'series',
description: t('Defines how the color are attributed.'),
description: t('series: Treat each series independently; overall: All series use the same scale; change: Show changes compared to the first data point in each series'),
},

canvas_image_rendering: {
Expand Down Expand Up @@ -512,10 +513,13 @@ export const controls = {
'Italy',
'Portugal',
'Morocco',
'Myanmar',
'Netherlands',
'Russia',
'Singapore',
'Spain',
'Thailand',
'Timorleste',
'Uk',
'Ukraine',
'Usa',
Expand Down Expand Up @@ -1160,6 +1164,7 @@ export const controls = {

series_height: {
type: 'SelectControl',
renderTrigger: true,
freeForm: true,
label: t('Series Height'),
default: '25',
Expand Down
4 changes: 2 additions & 2 deletions superset/assets/src/explore/store.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint camelcase: 0 */
import isReact from 'is-react';
import React from 'react';
import controls from './controls';
import visTypes, { sectionsToRender } from './visTypes';

Expand Down Expand Up @@ -51,7 +51,7 @@ export function getControlsState(state, form_data) {
const controlOverrides = viz.controlOverrides || {};
const controlsState = {};
controlNames.forEach((k) => {
if (isReact.element(k)) {
if (React.isValidElement(k)) {
// no state
return;
}
Expand Down
17 changes: 17 additions & 0 deletions superset/assets/src/visualizations/HorizonChart.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
.horizon-chart {
overflow: auto;
}

.horizon-chart .horizon-row {
border-bottom: solid 1px #ddd;
border-top: 0px;
padding: 0px;
margin: 0px;
}

.horizon-row span {
position: absolute;
color: #333;
font-size: 0.8em;
text-shadow: 1px 1px rgba(255, 255, 255, 0.75);
}
103 changes: 103 additions & 0 deletions superset/assets/src/visualizations/HorizonChart.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import d3 from 'd3';
import HorizonRow, { DEFAULT_COLORS } from './HorizonRow';
import './HorizonChart.css';

const propTypes = {
className: PropTypes.string,
width: PropTypes.number,
seriesHeight: PropTypes.number,
data: PropTypes.arrayOf(PropTypes.shape({
key: PropTypes.arrayOf(PropTypes.string),
values: PropTypes.arrayOf(PropTypes.shape({
y: PropTypes.number,
})),
})).isRequired,
// number of bands in each direction (positive / negative)
bands: PropTypes.number,
colors: PropTypes.arrayOf(PropTypes.string),
colorScale: PropTypes.string,
mode: PropTypes.string,
offsetX: PropTypes.number,
};
const defaultProps = {
className: '',
width: 800,
seriesHeight: 20,
bands: Math.floor(DEFAULT_COLORS.length / 2),
colors: DEFAULT_COLORS,
colorScale: 'series',
mode: 'offset',
offsetX: 0,
};

class HorizonChart extends React.PureComponent {
render() {
const {
className,
width,
data,
seriesHeight,
bands,
colors,
colorScale,
mode,
offsetX,
} = this.props;

let yDomain;
if (colorScale === 'overall') {
const allValues = data.reduce(
(acc, current) => acc.concat(current.values),
[],
);
yDomain = d3.extent(allValues, d => d.y);
}

return (
<div className={`horizon-chart ${className}`}>
{data.map(row => (
<HorizonRow
key={row.key}
width={width}
height={seriesHeight}
title={row.key[0]}
data={row.values}
bands={bands}
colors={colors}
colorScale={colorScale}
mode={mode}
offsetX={offsetX}
yDomain={yDomain}
/>
))}
</div>
);
}
}

HorizonChart.propTypes = propTypes;
HorizonChart.defaultProps = defaultProps;

function adaptor(slice, payload) {
const { selector, formData } = slice;
const element = document.querySelector(selector);
const {
horizon_color_scale: colorScale,
series_height: seriesHeight,
} = formData;

ReactDOM.render(
<HorizonChart
data={payload.data}
width={slice.width()}
seriesHeight={parseInt(seriesHeight, 10)}
colorScale={colorScale}
/>,
element,
);
}

export default adaptor;
Loading

0 comments on commit 424ddce

Please sign in to comment.