-
-
+
+ this.setState({ bins: e.target.value })}
+ />
);
diff --git a/static/popups/charts/Aggregations.jsx b/static/popups/charts/Aggregations.jsx
new file mode 100644
index 000000000..c4a3c7d2c
--- /dev/null
+++ b/static/popups/charts/Aggregations.jsx
@@ -0,0 +1,143 @@
+import _ from "lodash";
+import PropTypes from "prop-types";
+import React from "react";
+import Select, { createFilter } from "react-select";
+
+import { isDateCol } from "../../dtale/gridUtils";
+
+const AGGREGATION_OPTS = [
+ { value: "count", label: "Count" },
+ { value: "nunique", label: "Unique Count" },
+ { value: "sum", label: "Sum" },
+ { value: "mean", label: "Mean" },
+ { value: "rolling", label: "Rolling" },
+ { value: "first", label: "First" },
+ { value: "last", label: "Last" },
+ { value: "median", label: "Median" },
+ { value: "min", label: "Minimum" },
+ { value: "max", label: "Maximum" },
+ { value: "std", label: "Standard Deviation" },
+ { value: "var", label: "Variance" },
+ { value: "mad", label: "Mean Absolute Deviation" },
+ { value: "prod", label: "Product of All Items" },
+];
+
+function getAggregations({ columns, x, group }) {
+ if (isDateCol(_.get(_.find(columns, { name: _.get(x, "value") }), "dtype", "")) && _.isEmpty(group)) {
+ return AGGREGATION_OPTS;
+ }
+ return _.reject(AGGREGATION_OPTS, { value: "rolling" });
+}
+
+const ROLLING_COMPS = [
+ { value: "corr", label: "Correlation" },
+ { value: "count", label: "Count" },
+ { value: "cov", label: "Covariance" },
+ { value: "kurt", label: "Kurtosis" },
+ { value: "max", label: "Maximum" },
+ { value: "mean", label: "Mean" },
+ { value: "median", label: "median" },
+ { value: "min", label: "Minimum" },
+ { value: "skew", label: "Skew" },
+ { value: "std", label: "Standard Deviation" },
+ { value: "sum", label: "Sum" },
+ { value: "var", label: "Variance" },
+];
+
+class Aggregations extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ aggregation: props.aggregation ? _.find(AGGREGATION_OPTS, { value: props.aggregation }) : null,
+ rollingComputation: null,
+ rollingWindow: "4",
+ };
+ this.update = this.update.bind(this);
+ this.renderRolling = this.renderRolling.bind(this);
+ }
+
+ update(val, upperVal) {
+ this.setState(val, () => this.props.propagateState(upperVal));
+ }
+
+ renderRolling() {
+ if (_.get(this.state, "aggregation.value") === "rolling") {
+ const { rollingWindow, rollingComputation } = this.state;
+ return [
+
+ Window:
+ ,
+
+
+ this.update(
+ { rollingWindow: _.get(e, "target.value", "") },
+ { rollingWindow: _.get(e, "target.value", "") }
+ )
+ }
+ />
+
,
+
+ Computation:
+ ,
+
+
+
+
,
+
,
+ ];
+ }
+ return
;
+ }
+
+ render() {
+ return [
+
+ Aggregation:
+ ,
+
+
+
+
,
+ this.renderRolling(),
+ ];
+ }
+}
+Aggregations.displayName = "Aggregations";
+Aggregations.propTypes = {
+ propagateState: PropTypes.func,
+ columns: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/no-unused-prop-types
+ x: PropTypes.object, // eslint-disable-line react/no-unused-prop-types
+ group: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/no-unused-prop-types
+ aggregation: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+};
+
+export { Aggregations, AGGREGATION_OPTS, ROLLING_COMPS };
diff --git a/static/popups/charts/AxisEditor.css b/static/popups/charts/AxisEditor.css
new file mode 100644
index 000000000..47334d87e
--- /dev/null
+++ b/static/popups/charts/AxisEditor.css
@@ -0,0 +1,52 @@
+.axis-toggle__dropdown {
+ position: absolute;
+ top: 100%;
+ min-width: 15em;
+ width: 100%;
+ color: #404040;
+ font-weight: 400;
+ z-index: 10;
+ margin-top: -1px;
+ background-color: white;
+ border-width: 1px 1px 0 1px;
+ border-style: solid;
+ border-color: #a7b3b7;
+ border-top-color: #d3d9db;
+ border-radius: 0 0 0.25rem 0.25rem;
+}
+
+.axis-toggle__dropdown ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.axis-toggle__dropdown li {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ width: 100%;
+}
+
+.axis-toggle__dropdown li:last-child {
+ border-bottom: solid 1px #a7b3b7;
+}
+
+.axis-toggle__dropdown li span {
+ padding: 0.3em;
+}
+
+.axis-toggle__dropdown li span.toggler-action {
+ border: none;
+ margin-top: -0.1em;
+}
+
+.axis-toggle__dropdown li span.toggler-action button i {
+ vertical-align: text-bottom;
+}
+
+.axis-input {
+ text-align: center;
+ width: 3em !important;
+ padding: 0.3rem 0.3rem !important;
+}
diff --git a/static/popups/charts/AxisEditor.jsx b/static/popups/charts/AxisEditor.jsx
new file mode 100644
index 000000000..5ce25feae
--- /dev/null
+++ b/static/popups/charts/AxisEditor.jsx
@@ -0,0 +1,126 @@
+import _ from "lodash";
+import PropTypes from "prop-types";
+import React from "react";
+
+import menuUtils from "../../menuUtils";
+
+function buildState({ y, data }) {
+ const state = {};
+ _.forEach(y, ({ value }) => {
+ state[`${value}-min`] = _.get(data, ["min", value], "");
+ state[`${value}-max`] = _.get(data, ["max", value], "");
+ });
+ return state;
+}
+
+require("./AxisEditor.css");
+
+class AxisEditor extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = _.assignIn({ open: false }, buildState(props));
+ this.closeMenu = this.closeMenu.bind(this);
+ }
+
+ shouldComponentUpdate(newProps, newState) {
+ return !_.isEqual(this.props.data, newProps.data) || !_.isEqual(this.state, newState);
+ }
+
+ componentDidUpdate(prevProps) {
+ if (!_.isEqual(this.props.data, prevProps.data)) {
+ this.setState(buildState(this.props));
+ }
+ }
+
+ closeMenu() {
+ const settings = {
+ min: _.assign({}, this.props.data.min),
+ max: _.assign({}, this.props.data.max),
+ };
+ const errors = [];
+ _.forEach(this.props.y, ({ value }) => {
+ _.forEach(["min", "max"], prop => {
+ const curr = this.state[`${value}-${prop}`];
+ if (curr !== "" && !_.isNaN(parseFloat(curr))) {
+ settings[prop][value] = parseFloat(curr);
+ } else {
+ errors.push(`${value} has invalid ${prop}!`);
+ }
+ });
+ });
+ _.forEach(this.props.y, ({ value }) => {
+ if (settings.min[value] > settings.max[value]) {
+ errors.push(`${value} must have a min < max!`);
+ }
+ });
+ if (_.size(errors)) {
+ this.setState({ errors });
+ } else {
+ this.setState({ open: false }, () => this.props.updateAxis(settings));
+ }
+ }
+
+ render() {
+ if (_.isEmpty(this.props.data)) {
+ return null;
+ }
+ const { min, max } = this.props.data;
+ const { y } = this.props;
+ const axisMarkup = _.map(y, ({ value }, idx) => {
+ const minProp = `${value}-min`;
+ const maxProp = `${value}-max`;
+ return (
+
+ {value}
+ Min:
+
+ this.setState({ [minProp]: e.target.value })}
+ />
+
+ Max:
+
+ this.setState({ [maxProp]: e.target.value })}
+ />
+
+
+ );
+ });
+ const menuHandler = menuUtils.openMenu("axisEditor", () => this.setState({ open: true }), this.closeMenu);
+ return (
+
+
+
Axis Ranges
+
+
+ {_.truncate(
+ _.join(
+ _.map(y, ({ value }) => `${value} (${min[value]},${max[value]})`),
+ ", "
+ )
+ )}
+
+
+
+
+
+ );
+ }
+}
+AxisEditor.displayName = "AxisEditor";
+AxisEditor.propTypes = {
+ data: PropTypes.object,
+ y: PropTypes.arrayOf(PropTypes.object),
+ updateAxis: PropTypes.func,
+};
+
+export default AxisEditor;
diff --git a/static/popups/charts/ChartLabel.jsx b/static/popups/charts/ChartLabel.jsx
index 5ffc8b1e2..6af4aab53 100644
--- a/static/popups/charts/ChartLabel.jsx
+++ b/static/popups/charts/ChartLabel.jsx
@@ -2,27 +2,54 @@ import _ from "lodash";
import PropTypes from "prop-types";
import React from "react";
+import { AGGREGATION_OPTS, ROLLING_COMPS } from "./Aggregations";
+
+function buildLabel({ x, y, group, aggregation, rollingWindow, rollingComputation }) {
+ const yLabel = _.join(_.map(y, "value"), ", ");
+ let labelStr = yLabel;
+ if (aggregation) {
+ const aggLabel = _.find(AGGREGATION_OPTS, { value: aggregation }).label;
+ if (aggregation === "rolling") {
+ const compLabel = _.find(ROLLING_COMPS, { value: rollingComputation }).label;
+ labelStr = `${aggLabel} ${compLabel} (window: ${rollingWindow}) of ${yLabel}`;
+ } else {
+ labelStr = `${aggLabel} of ${yLabel}`;
+ }
+ }
+ labelStr = `${labelStr} by ${_.get(x, "value")}`;
+ if (!_.isEmpty(group)) {
+ labelStr = `${labelStr} grouped by ${_.join(_.map(group, "value"), ", ")}`;
+ }
+ return labelStr;
+}
+
class ChartLabel extends React.Component {
- render() {
- const { x, y, group, aggregation } = this.props;
- let labelStr = aggregation ? `${aggregation.label} of ${y.value}` : y.value;
- labelStr = `${labelStr} by ${x.value}`;
- if (!_.isEmpty(group)) {
- labelStr = `${labelStr} grouped by ${_.join(_.map(group, "value"), ", ")}`;
+ constructor(props) {
+ super(props);
+ this.state = { label: buildLabel(this.props) };
+ }
+
+ componentDidUpdate(prevProps) {
+ if (this.props.url !== prevProps.url) {
+ this.setState({ label: buildLabel(this.props) });
}
+ }
+
+ render() {
return (
- {labelStr}
+ {this.state.label}
);
}
}
ChartLabel.displayName = "ChartLabel";
ChartLabel.propTypes = {
- x: PropTypes.object,
- y: PropTypes.object,
- group: PropTypes.arrayOf(PropTypes.object),
- aggregation: PropTypes.object,
+ url: PropTypes.string,
+ x: PropTypes.object, // eslint-disable-line react/no-unused-prop-types
+ y: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/no-unused-prop-types
+ group: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/no-unused-prop-types
+ aggregation: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
};
export default ChartLabel;
diff --git a/static/popups/charts/Charts.css b/static/popups/charts/Charts.css
index 30bbffa33..750524bde 100644
--- a/static/popups/charts/Charts.css
+++ b/static/popups/charts/Charts.css
@@ -4,8 +4,6 @@ div.charts-body input[type='checkbox'] {
div.charts-body {
padding: 1em;
}
-/*.charts-filters .Select__control,
-.charts-filters .Select__value-container,
-.charts-filters .Select__placeholder {
- height: calc(1.51562rem + 2px);
-}*/
+div.charts-filters > span:first-child {
+ width: 5.5em;
+}
diff --git a/static/popups/charts/Charts.jsx b/static/popups/charts/Charts.jsx
index f432fb017..b37518263 100644
--- a/static/popups/charts/Charts.jsx
+++ b/static/popups/charts/Charts.jsx
@@ -1,59 +1,55 @@
import _ from "lodash";
-import moment from "moment";
import PropTypes from "prop-types";
import React from "react";
import { connect } from "react-redux";
import Select, { createFilter } from "react-select";
-import ConditionalRender from "../../ConditionalRender";
-import { JSAnchor } from "../../JSAnchor";
import { RemovableError } from "../../RemovableError";
import { buildURLString } from "../../actions/url-utils";
-import { isDateCol } from "../../dtale/gridUtils";
import { fetchJson } from "../../fetcher";
-import ChartLabel from "./ChartLabel";
+import { Aggregations } from "./Aggregations";
import ChartsBody from "./ChartsBody";
-const AGGREGATIONS = [
- { value: "count", label: "Count" },
- { value: "first", label: "First" },
- { value: "last", label: "Last" },
- { value: "mean", label: "Mean" },
- { value: "median", label: "Median" },
- { value: "min", label: "Minimum" },
- { value: "max", label: "Maximum" },
- { value: "std", label: "Standard Deviation" },
- { value: "var", label: "Variance" },
- { value: "mad", label: "Mean Absolute Deviation" },
- { value: "prod", label: "Product of All Items" },
- { value: "sum", label: "Sum" },
-];
-const CHART_TYPES = ["line", "bar", "stacked", "pie", "wordcloud"];
-
-function generateChartState({ group, x, y, query, aggregation }, { dataId }) {
+function generateChartState(state, { dataId }) {
+ const { group, x, y, query, aggregation, rollingWindow, rollingComputation } = state;
if (_.isNull(x) || _.isNull(y)) {
return { url: null };
}
- const params = { x: x.value, y: y.value, query };
+ const params = { x: x.value, y: _.join(_.map(y, "value"), ","), query };
if (!_.isNull(group)) {
params.group = _.join(_.map(group, "value"), ",");
}
if (!_.isNull(aggregation)) {
- params.agg = aggregation.value;
+ params.agg = aggregation;
+ if (aggregation === "rolling") {
+ if (rollingWindow && parseInt(rollingWindow)) {
+ params.rollingWin = parseInt(rollingWindow);
+ } else {
+ return { url: null, error: "Aggregation (rolling) requires a window" };
+ }
+ if (rollingComputation) {
+ params.rollingComp = rollingComputation;
+ } else {
+ return {
+ url: null,
+ error: "Aggregation (rolling) requires a computation",
+ };
+ }
+ }
}
return { url: buildURLString(`/dtale/chart-data/${dataId}`, params) };
}
-const baseState = ({ query, x, y, group, aggregation, chartType, chartPerGroup }) => ({
+const baseState = ({ query, x, y, group, aggregation }) => ({
x: x ? { value: x } : null,
- y: y ? { value: y } : null,
+ y: y ? _.map(y, y2 => ({ value: y2 })) : null,
group: group ? _.map(group, g => ({ value: g })) : null,
- aggregation: aggregation ? _.find(AGGREGATIONS, { value: aggregation }) : null,
- chartType: { value: chartType || "line" },
+ aggregation,
+ rollingComputation: null,
+ rollingWindow: "4",
url: null,
- zoomed: null,
- chartPerGroup: chartPerGroup === "true",
query,
+ error: null,
});
require("./Charts.css");
@@ -62,9 +58,6 @@ class ReactCharts extends React.Component {
constructor(props) {
super(props);
this.state = baseState(_.get(props, "chartData") || {});
- this.viewTimeDetails = this.viewTimeDetails.bind(this);
- this.resetZoom = this.resetZoom.bind(this);
- this.renderLabel = this.renderLabel.bind(this);
this.renderSelect = this.renderSelect.bind(this);
}
@@ -111,101 +104,34 @@ class ReactCharts extends React.Component {
);
}
- resetZoom() {
- const charts = _.get(this, "_chart.state.charts");
- if (charts) {
- _.forEach(charts, c => {
- delete c.options.scales.xAxes[0].ticks;
- c.update();
- });
- this.setState({ zoomed: false });
- }
- }
-
- viewTimeDetails(evt) {
- const charts = _.get(this, "_chart.state.charts");
- if (charts) {
- const selectedChart = _.find(charts, c => !_.isEmpty(c.getElementAtEvent(evt)));
- const selectedPoint = _.head(selectedChart.getElementAtEvent(evt));
- if (selectedPoint) {
- const ticks = {
- min: selectedChart.data.labels[_.max([0, selectedPoint._index - 10])],
- max: selectedChart.data.labels[_.min([selectedChart.data.labels.length - 1, selectedPoint._index + 10])],
- };
- _.forEach(charts, c => {
- c.options.scales.xAxes[0].ticks = ticks;
- c.update();
- });
- let zoomed = `${ticks.min} - ${ticks.max}`;
- if (isDateCol(_.find(this.state.columns, { name: this.state.x.value }).dtype)) {
- const buildLabel = x => moment(new Date(x)).format("YYYY-MM-DD");
- zoomed = `${buildLabel(ticks.min)} - ${buildLabel(ticks.max)}`;
- }
- this.setState({ zoomed });
- }
- }
- }
-
- renderLabel() {
- const { url, error, zoomed } = this.state;
- return (
-
-
-
-
- {`Zoomed: ${zoomed}`}
- {"X"}
-
-
-
- );
- }
-
render() {
- const { columns } = this.state;
+ const { columns, query, error } = this.state;
if (_.isEmpty(columns)) {
- return null;
- }
- const additionalOptions = {};
- if (this.state.chartType.value === "line") {
- additionalOptions.onClick = this.viewTimeDetails;
+ return error;
}
return (
-
X:
-
{this.renderSelect("x", ["y", "group"])}
-
Y:
-
{this.renderSelect("y", ["x", "group"])}
-
Group:
-
{this.renderSelect("group", ["x", "y"], true)}
-
Aggregation:
-
-
-
-
-
-
-
Query
+
Query:
this.setState({ query: e.target.value })}
/>
+
+
+
X:
+
{this.renderSelect("x", ["y", "group"])}
+
Y:
+
{this.renderSelect("y", ["x", "group"], true)}
+
Group:
+
{this.renderSelect("group", ["x", "y"], true)}
+
+
+
this.setState(state)} {...this.state} />
-
-
Chart:
-
-
-
-
-
0}>
- Chart per Group:
-
- this.setState({ chartPerGroup: e.target.checked })}
- />
-
-
-
-
(this._chart = r)}
+ chartType={_.get(this.props, "chartData.chartType")}
+ chartPerGroup={_.get(this.props, "chartData.chartPerGroup")}
visible={_.get(this.props, "chartData.visible", false)}
- url={this.state.url}
- columns={this.state.columns}
- chartType={_.get(this.state, "chartType.value")}
- chartPerGroup={this.state.chartPerGroup}
- x={_.get(this.state, "x.value")}
- y={_.get(this.state, "y.value")}
- group={_.join(_.map(_.get(this.state, "group") || [], "value"), ",")}
- additionalOptions={additionalOptions}
+ {...this.state}
height={450}
/>
diff --git a/static/popups/charts/ChartsBody.jsx b/static/popups/charts/ChartsBody.jsx
index 917121f3b..4fa815f59 100644
--- a/static/popups/charts/ChartsBody.jsx
+++ b/static/popups/charts/ChartsBody.jsx
@@ -1,66 +1,121 @@
-import $ from "jquery";
+/* eslint max-lines: "off" */
import _ from "lodash";
+import moment from "moment";
import PropTypes from "prop-types";
import React from "react";
+import Select, { createFilter } from "react-select";
import { Bouncer } from "../../Bouncer";
+import ConditionalRender from "../../ConditionalRender";
+import { JSAnchor } from "../../JSAnchor";
import { RemovableError } from "../../RemovableError";
import chartUtils from "../../chartUtils";
+import { isDateCol } from "../../dtale/gridUtils";
import { fetchJson } from "../../fetcher";
+import { toggleBouncer } from "../../toggleUtils";
+import AxisEditor from "./AxisEditor";
+import ChartLabel from "./ChartLabel";
import WordcloudBody from "./WordcloudBody";
-function toggleBouncer() {
- $("#chart-bouncer").toggle();
- $("#coveragePopup").toggle();
+function chartType(state) {
+ return _.get(state, "chartType.value");
}
-function createChartCfg(ctx, { data }, { columns, x, y, additionalOptions, chartType, configHandler }) {
+function chartTypes({ y }) {
+ const types = ["line", "bar", "stacked"];
+ const yList = _.concat([], y || []);
+ if (_.size(yList) < 2) {
+ types.push("scatter");
+ types.push("pie");
+ }
+ types.push("wordcloud");
+ return types;
+}
+
+function createChartCfg(ctx, data, { columns, x, y, additionalOptions, chartType, configHandler }, funcs = {}) {
let cfg = null;
+ const mainProps = {
+ columns,
+ x: _.get(x, "value"),
+ y: _.map(y || [], "value"),
+ additionalOptions,
+ configHandler,
+ };
switch (chartType) {
case "bar":
- cfg = chartUtils.createBarCfg({ data }, { columns, x, y, additionalOptions, configHandler });
+ cfg = chartUtils.createBarCfg(data, mainProps);
break;
case "stacked":
- cfg = chartUtils.createStackedCfg({ data }, { columns, x, y, additionalOptions, configHandler });
+ cfg = chartUtils.createStackedCfg(data, mainProps);
+ break;
+ case "scatter":
+ cfg = chartUtils.createScatterCfg(data, mainProps);
break;
case "pie":
- cfg = chartUtils.createPieCfg({ data }, { columns, x, y, additionalOptions, configHandler });
+ cfg = chartUtils.createPieCfg(data, mainProps);
break;
case "line":
- default:
- cfg = chartUtils.createLineCfg({ data }, { columns, x, y, additionalOptions, configHandler });
+ default: {
+ if (_.has(funcs, "viewTimeDetails")) {
+ mainProps.additionalOptions = _.assignIn(additionalOptions || {}, {
+ onClick: funcs.viewTimeDetails,
+ });
+ }
+ cfg = chartUtils.createLineCfg(data, mainProps);
break;
+ }
}
return chartUtils.createChart(ctx, cfg);
}
-function createCharts(data, props) {
+function createCharts(data, props, state, funcs = {}) {
if (_.isEmpty(_.get(data, "data", {}))) {
return null;
}
- if (props.chartType === "wordcloud") {
+ const chartTypeVal = chartType(state);
+ if (chartTypeVal === "wordcloud") {
return null;
}
- if (props.chartPerGroup) {
+ if (state.chartPerGroup) {
return _.map(_.get(data, "data", {}), (series, seriesKey) => {
- const mainProps = _.pick(props, ["columns", "x", "y", "additionalOptions", "chartType", "configHandler"]);
+ const mainProps = _.pick(props, ["columns", "x", "y", "additionalOptions", "configHandler"]);
+ mainProps.chartType = chartTypeVal;
mainProps.additionalOptions = _.assignIn(mainProps.additionalOptions, {
title: { display: true, text: seriesKey },
});
- const builder = ctx => createChartCfg(ctx, { data: { all: series } }, mainProps);
+ const subData = { data: { all: series }, min: data.min, max: data.max };
+ const builder = ctx => createChartCfg(ctx, subData, mainProps, funcs);
return chartUtils.chartWrapper(`chartCanvas-${seriesKey}`, null, builder);
});
}
- const builder = ctx => createChartCfg(ctx, data, props);
+ const builder = ctx => createChartCfg(ctx, data, _.assignIn({}, props, { chartType: chartTypeVal }), funcs);
return [chartUtils.chartWrapper("chartCanvas", null, builder)];
}
+function sortBars(data, props, state) {
+ _.forEach(_.get(data, "data", {}), series => {
+ const [sortedX, sortedY] = _.unzip(_.sortBy(_.zip(series.x, series[props.y]), "1"));
+ series.x = sortedX;
+ series[props.y] = sortedY;
+ });
+ return createCharts(data, props, state);
+}
+
class ChartsBody extends React.Component {
constructor(props) {
super(props);
this.mounted = false;
- this.state = { charts: null, error: null };
- this.buildChart = this.buildChart.bind(this);
+ this.state = {
+ chartType: { value: props.chartType || "line" },
+ chartPerGroup: props.chartPerGroup === "true",
+ charts: null,
+ error: null,
+ zoomed: null,
+ };
+ _.forEach(
+ ["buildChart", "sortBars", "updateAxis", "viewTimeDetails", "resetZoom", "renderLabel", "renderControls"],
+ f => (this[f] = this[f].bind(this))
+ );
}
shouldComponentUpdate(newProps, newState) {
@@ -72,11 +127,12 @@ class ChartsBody extends React.Component {
return true;
}
- if (this.props.chartType == "wordcloud" && !_.isEqual(this.state.data, newState.data)) {
+ const selectedState = ["chartType", "chartPerGroup", "data", "zoomed"];
+ if (!_.isEqual(_.pick(this.state, selectedState), _.pick(newState, selectedState))) {
return true;
}
- if (this.state.chart != newState.chart) {
+ if (this.state.charts != newState.charts) {
// Don't re-render if we've only changed the chart.
return false;
}
@@ -84,7 +140,7 @@ class ChartsBody extends React.Component {
return false; // Otherwise, use the default react behaviour.
}
- componentDidUpdate(prevProps) {
+ componentDidUpdate(prevProps, prevState) {
if (!this.props.visible) {
return;
}
@@ -92,13 +148,18 @@ class ChartsBody extends React.Component {
this.buildChart();
return;
}
- const selectedProps = ["chartType", "chartPerGroup"];
- if (!_.isEqual(_.pick(this.props, selectedProps), _.pick(prevProps, selectedProps))) {
- _.forEach(this.state.charts || [], c => c.destroy());
- this.setState({
- error: null,
- charts: createCharts(_.get(this.state, "data", {}), this.props),
- });
+ const selectedState = ["chartType", "chartPerGroup"];
+ if (!_.isEqual(_.pick(this.state, selectedState), _.pick(prevState, selectedState))) {
+ if (chartType(this.state) !== chartType({ state: prevState }) && chartType({ state: prevState }) === "scatter") {
+ this.buildChart(); //need to reload chart data because scatter charts allow duplicates
+ } else {
+ _.forEach(this.state.charts || [], c => c.destroy());
+ const funcs = _.pick(this, ["viewTimeDetails"]);
+ this.setState({
+ error: null,
+ charts: createCharts(_.get(this.state, "data", {}), this.props, this.state, funcs),
+ });
+ }
}
}
@@ -115,10 +176,10 @@ class ChartsBody extends React.Component {
if (_.isNil(this.props.url)) {
return;
}
- toggleBouncer();
+ toggleBouncer(["chart-bouncer", "coveragePopup"]);
_.forEach(this.state.charts || [], c => c.destroy());
- fetchJson(this.props.url, fetchedChartData => {
- toggleBouncer();
+ fetchJson(`${this.props.url}${chartType(this.state) === "scatter" ? "&allowDupes=true" : ""}`, fetchedChartData => {
+ toggleBouncer(["chart-bouncer", "coveragePopup"]);
if (this.mounted) {
if (fetchedChartData.error) {
this.setState({
@@ -138,41 +199,161 @@ class ChartsBody extends React.Component {
this.setState({
error: null,
data: fetchedChartData,
- charts: createCharts(fetchedChartData, this.props),
+ charts: createCharts(fetchedChartData, this.props, this.state, _.pick(this, ["viewTimeDetails"])),
});
}
});
}
+ resetZoom() {
+ const { charts } = this.state;
+ if (charts) {
+ _.forEach(charts, c => {
+ delete c.options.scales.xAxes[0].ticks;
+ c.update();
+ });
+ this.setState({ zoomed: null });
+ }
+ }
+
+ viewTimeDetails(evt) {
+ const { charts } = this.state;
+ if (charts) {
+ const selectedChart = _.find(charts, c => !_.isEmpty(c.getElementAtEvent(evt)));
+ if (selectedChart) {
+ const selectedPoint = _.head(selectedChart.getElementAtEvent(evt));
+ if (selectedPoint) {
+ const ticks = {
+ min: selectedChart.data.labels[_.max([0, selectedPoint._index - 10])],
+ max: selectedChart.data.labels[_.min([selectedChart.data.labels.length - 1, selectedPoint._index + 10])],
+ };
+ _.forEach(charts, c => {
+ c.options.scales.xAxes[0].ticks = ticks;
+ c.update();
+ });
+ let zoomed = `${ticks.min} - ${ticks.max}`;
+ if (isDateCol(_.find(this.props.columns, { name: this.props.x.value }).dtype)) {
+ const buildLabel = x => moment(new Date(x)).format("YYYY-MM-DD");
+ zoomed = `${buildLabel(ticks.min)} - ${buildLabel(ticks.max)}`;
+ }
+ this.setState({ zoomed });
+ }
+ }
+ }
+ }
+
+ renderLabel() {
+ const { data, error, zoomed } = this.state;
+ return (
+
+
+
+
+ {`Zoomed: ${zoomed}`}
+ {"X"}
+
+
+
+ );
+ }
+
+ sortBars() {
+ _.forEach(this.state.charts || [], c => c.destroy());
+ this.setState({
+ charts: sortBars(_.get(this.state, "data", {}), this.props, this.state),
+ });
+ }
+
+ updateAxis(settings) {
+ if (_.isEqual(settings, _.pick(this.state.data, ["min", "max"]))) {
+ return;
+ }
+ _.forEach(this.state.charts || [], c => c.destroy());
+ const updatedData = _.assignIn({}, _.get(this.state, "data", {}), settings);
+ this.setState({
+ data: updatedData,
+ charts: createCharts(updatedData, this.props, this.state, _.pick(this, ["viewTimeDetails"])),
+ });
+ }
+
+ renderControls() {
+ if (this.props.showControls) {
+ const showBarSort = chartType(this.state) === "bar" && _.isNull(this.props.group) && !_.isEmpty(this.state.data);
+ return [
+
+
Chart:
+
+
+
+
+
0}>
+ Chart per Group:
+
+ this.setState({ chartPerGroup: e.target.checked })}
+ />
+
+
+
+
+
+
+
,
+
,
+ ];
+ }
+ return null;
+ }
+
render() {
+ if (!this.props.visible) {
+ return null;
+ }
let charts = null;
- if (this.props.chartPerGroup || (this.props.chartType === "wordcloud" && this.props.group)) {
+ if (chartType(this.state) === "wordcloud") {
+ charts =
;
+ } else if (this.state.chartPerGroup) {
charts = (
- {_.map(_.keys(_.get(this.state, "data.data", {})), k => (
+ {_.map(_.get(this.state, "data.data", {}), (_v, k) => (
- {this.props.chartType !== "wordcloud" && }
- {this.props.chartType === "wordcloud" && (
-
- )}
+
))}
);
- } else if (this.props.chartType === "wordcloud") {
- charts =
;
} else {
charts =
;
}
- return (
-
+ return [
+ this.renderControls(),
+
{this.state.error}
{charts}
-
- );
+
,
+ ];
}
}
@@ -180,21 +361,26 @@ ChartsBody.displayName = "ChartsBody";
ChartsBody.propTypes = {
url: PropTypes.string,
columns: PropTypes.arrayOf(PropTypes.object),
- x: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
- y: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
- group: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+ x: PropTypes.object, // eslint-disable-line react/no-unused-prop-types
+ y: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/no-unused-prop-types
+ group: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/no-unused-prop-types
+ aggregation: PropTypes.string,
+ rollingWindow: PropTypes.string,
+ rollingComputation: PropTypes.string,
chartType: PropTypes.string,
chartPerGroup: PropTypes.bool,
visible: PropTypes.bool.isRequired,
height: PropTypes.number,
additionalOptions: PropTypes.object, // eslint-disable-line react/no-unused-prop-types
configHandler: PropTypes.func,
+ showControls: PropTypes.bool,
};
ChartsBody.defaultProps = {
height: 400,
chartPerGroup: false,
chartType: "line",
configHandler: config => config,
+ showControls: true,
};
export default ChartsBody;
diff --git a/static/popups/charts/WordcloudBody.jsx b/static/popups/charts/WordcloudBody.jsx
index f8d4659a0..c8759337a 100644
--- a/static/popups/charts/WordcloudBody.jsx
+++ b/static/popups/charts/WordcloudBody.jsx
@@ -3,49 +3,77 @@ import PropTypes from "prop-types";
import React from "react";
import ReactWordcloud from "react-wordcloud";
+import chartUtils from "../../chartUtils";
+import { isDateCol } from "../../dtale/gridUtils";
+
class WordcloudBody extends React.Component {
constructor(props) {
super(props);
}
render() {
- const { chartType, seriesKey } = this.props;
- if (chartType !== "wordcloud") {
- return null;
- }
- const series = _.get(this.props, ["data", "data", seriesKey], {});
- if (_.isEmpty(series)) {
+ const { chartType, x, y, columns } = this.props;
+ if (chartType.value !== "wordcloud") {
return null;
}
+ const yProps = _.map(y || [], "value");
+ const colWidth = _.size(_.get(this.props, "data.data", {})) * _.size(yProps) == 1 ? "12" : "6";
return (
-
- {seriesKey !== "all" &&
{seriesKey}}
-
- ({
- text: _.truncate(l + "", { length: 24 }),
- fullText: l + "",
- value: series.y[i],
- })),
- "value"
- )}
- callbacks={{
- getWordTooltip: ({ fullText, value }) => `${fullText} (${value})`,
- }}
- />
-
+
+ {_.flatMap(_.get(this.props, "data.data", {}), (series, seriesKey) =>
+ _.map(yProps, yProp => {
+ if (_.isEmpty(series[yProp] || [])) {
+ return null;
+ }
+ const labels = [];
+ if (seriesKey !== "all") {
+ labels.push(seriesKey);
+ }
+ if (_.size(yProps) > 1) {
+ labels.push(yProp);
+ }
+ const hasLabel = _.size(labels) > 0;
+ return (
+
+
+ {hasLabel &&
{_.join(labels, " - ")}}
+
+ {
+ let labelText = l + "";
+ if (isDateCol(_.find(columns, { name: x.value }).dtype)) {
+ labelText = chartUtils.timestampLabel(l);
+ }
+ return {
+ text: _.truncate(labelText, { length: 24 }),
+ fullText: labelText,
+ value: series[yProp][i],
+ };
+ }),
+ "value"
+ )}
+ callbacks={{
+ getWordTooltip: ({ fullText, value }) => `${fullText} (${value})`,
+ }}
+ />
+
+
+
+ );
+ })
+ )}
);
}
@@ -54,9 +82,11 @@ class WordcloudBody extends React.Component {
WordcloudBody.displayName = "WordcloudBody";
WordcloudBody.propTypes = {
data: PropTypes.object, // eslint-disable-line react/no-unused-prop-types
- seriesKey: PropTypes.string,
- group: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
- chartType: PropTypes.string,
+ columns: PropTypes.arrayOf(PropTypes.object),
+ x: PropTypes.object,
+ y: PropTypes.arrayOf(PropTypes.object),
+ group: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/no-unused-prop-types
+ chartType: PropTypes.object,
height: PropTypes.number,
};
export default WordcloudBody;
diff --git a/static/popups/correlations/CorrelationScatterStats.jsx b/static/popups/correlations/CorrelationScatterStats.jsx
index cebd7ec21..eca701573 100644
--- a/static/popups/correlations/CorrelationScatterStats.jsx
+++ b/static/popups/correlations/CorrelationScatterStats.jsx
@@ -46,8 +46,8 @@ CorrelationScatterStats.propTypes = {
selectedCols: PropTypes.arrayOf(PropTypes.string),
date: PropTypes.string,
stats: PropTypes.shape({
- pearson: PropTypes.number,
- spearman: PropTypes.number,
+ pearson: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ spearman: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
correlated: PropTypes.number,
only_in_s0: PropTypes.number,
only_in_s1: PropTypes.number,
diff --git a/static/popups/correlations/correlationsUtils.jsx b/static/popups/correlations/correlationsUtils.jsx
index 7f628d927..81f8af962 100644
--- a/static/popups/correlations/correlationsUtils.jsx
+++ b/static/popups/correlations/correlationsUtils.jsx
@@ -1,84 +1,28 @@
import chroma from "chroma-js";
-import $ from "jquery";
import _ from "lodash";
import chartUtils from "../../chartUtils";
-import { formatScatterPoints, getMax, getMin } from "../scatterChartUtils";
-function toggleBouncer() {
- $("#scatter-bouncer").toggle();
- $("#rawScatterChart").toggle();
-}
-
-const pointFormatter = (xProp, yProp) => point => ({
- x: point[xProp],
- y: point[yProp],
- index: point.index,
-});
const colorScale = chroma.scale(["red", "yellow", "green"]).domain([-1, 0, 1]);
const percent = num => (num === "N/A" ? num : `${_.round(num * 100, 2)}%`);
-function createScatter(ctx, chartData, xProp, yProp, label, onClick) {
- const formatter = pointFormatter(xProp, yProp);
- const scatterData = formatScatterPoints(chartData, formatter);
+function createScatter(ctx, data, xProp, yProp, onClick) {
+ const builder = data =>
+ _.map(_.zip(data.all.x, data.all[yProp], data.all.index), ([xVal, yVal, index]) => ({ x: xVal, y: yVal, index }));
+ const scatterCfg = chartUtils.createScatterCfg(data, { x: xProp, y: [yProp] }, builder);
+ scatterCfg.options.tooltips.callbacks.title = (tooltipItems, data) => [
+ [`Index: ${data.datasets[tooltipItems[0].datasetIndex].data[tooltipItems[0].index].index}`],
+ ];
+ delete scatterCfg.options.scales.xAxes[0].ticks;
+ delete scatterCfg.options.scales.yAxes[0].ticks;
+ scatterCfg.options.onClick = onClick;
// eslint-disable-next-line new-cap
- const chart = chartUtils.createChart(ctx, {
- type: "scatter",
- data: {
- datasets: [_.assign({ label, xLabels: [xProp], yLabels: [yProp] }, scatterData)],
- },
- options: {
- tooltips: {
- callbacks: {
- title: (tooltipItems, data) => [
- [`Index: ${data.datasets[tooltipItems[0].datasetIndex].data[tooltipItems[0].index].index}`],
- ],
- label: (tooltipItem, data) => {
- const chartData = data.datasets[tooltipItem.datasetIndex];
- const pointData = chartData.data[tooltipItem.index];
- return [
- `${chartData.xLabels[0]}: ${_.round(pointData.x, 4)}`,
- `${chartData.yLabels[0]}: ${_.round(pointData.y, 4)}`,
- ];
- },
- },
- },
- scales: {
- xAxes: [
- {
- ticks: {
- min: getMin(scatterData.data, "x"),
- max: getMax(scatterData.data, "x"),
- },
- scaleLabel: { display: true, labelString: xProp },
- },
- ],
- yAxes: [
- {
- ticks: {
- min: getMin(scatterData.data, "y"),
- max: getMax(scatterData.data, "y"),
- },
- scaleLabel: { display: true, labelString: yProp },
- },
- ],
- },
- legend: { display: false },
- pan: { enabled: true, mode: "x" },
- zoom: { enabled: true, mode: "x" },
- maintainAspectRatio: false,
- responsive: false,
- showLines: false,
- onClick,
- },
- });
+ const chart = chartUtils.createChart(ctx, scatterCfg);
return chart;
}
export default {
- toggleBouncer,
colorScale,
createScatter,
percent,
- pointFormatter,
};
diff --git a/static/popups/scatterChartUtils.js b/static/scatterChartUtils.js
similarity index 78%
rename from static/popups/scatterChartUtils.js
rename to static/scatterChartUtils.js
index f413a7a7c..e066eeb68 100644
--- a/static/popups/scatterChartUtils.js
+++ b/static/scatterChartUtils.js
@@ -1,5 +1,7 @@
import _ from "lodash";
+const basePointFormatter = (xProp, yProp) => point => _.assignIn(point, { x: point[xProp], y: point[yProp] });
+
function formatScatterPoints(chartData, formatter = p => p, highlight = () => false, filter = () => false) {
const data = [],
pointBackgroundColor = [],
@@ -57,14 +59,14 @@ function formatScatterPoints(chartData, formatter = p => p, highlight = () => fa
};
}
-function getMin(data, prop) {
- const min = _.min(_.map(data, prop));
+function getScatterMin(data, prop = null) {
+ const min = _.min(_.isNull(prop) ? data : _.map(data, prop));
return _.floor(min + (min % 1 ? 0 : -1)) - 0.5;
}
-function getMax(data, prop) {
- const max = _.max(_.map(data, prop));
+function getScatterMax(data, prop = null) {
+ const max = _.max(_.isNull(prop) ? data : _.map(data, prop));
return _.ceil(max + (max % 1 ? 0 : 1)) + 0.5;
}
-export { formatScatterPoints, getMin, getMax };
+export { basePointFormatter, formatScatterPoints, getScatterMin, getScatterMax };
diff --git a/static/toggleButtonUtils.js b/static/toggleUtils.js
similarity index 58%
rename from static/toggleButtonUtils.js
rename to static/toggleUtils.js
index 3f11b469e..300009d0c 100644
--- a/static/toggleButtonUtils.js
+++ b/static/toggleUtils.js
@@ -1,7 +1,12 @@
import _ from "lodash";
+import $ from "jquery";
function buildButton(active, activate, disabled = false) {
return { className: `btn btn-primary ${active ? "active" : ""}`, onClick: active ? _.noop : activate, disabled };
}
-export { buildButton };
+function toggleBouncer(ids) {
+ _.forEach(ids, id => $("#" + id).toggle());
+}
+
+export { buildButton, toggleBouncer };
diff --git a/tests/dtale/test_views.py b/tests/dtale/test_views.py
index dda43362b..b6e9fdf26 100644
--- a/tests/dtale/test_views.py
+++ b/tests/dtale/test_views.py
@@ -479,10 +479,10 @@ def test_get_correlations_ts(unittest, rolling_data):
expected = {
'data': {'all': {
'x': [946702800000, 946789200000, 946875600000, 946962000000, 947048400000],
- 'y': [1.0, 1.0, 1.0, 1.0, 1.0]
+ 'corr': [1.0, 1.0, 1.0, 1.0, 1.0]
}},
- 'max': 1.0,
- 'min': 1.0,
+ 'max': {'corr': 1.0, 'x': 947048400000},
+ 'min': {'corr': 1.0, 'x': 946702800000},
'success': True,
}
unittest.assertEqual(response_data, expected, 'should return timeseries correlation')
@@ -530,13 +530,15 @@ def test_get_scatter(unittest):
'only_in_s1': 0,
'spearman': 0.9999999999999999
},
- data=[
- {u'index': 0, u'foo': 0, u'bar': 0},
- {u'index': 1, u'foo': 1, u'bar': 1},
- {u'index': 2, u'foo': 2, u'bar': 2},
- {u'index': 3, u'foo': 3, u'bar': 3},
- {u'index': 4, u'foo': 4, u'bar': 4}
- ],
+ data={
+ 'all': {
+ 'bar': [0, 1, 2, 3, 4],
+ 'index': [0, 1, 2, 3, 4],
+ 'x': [0, 1, 2, 3, 4]
+ }
+ },
+ max={'bar': 4, 'index': 4, 'x': 4},
+ min={'bar': 0, 'index': 0, 'x': 0},
x='foo'
)
unittest.assertEqual(response_data, expected, 'should return scatter')
@@ -579,7 +581,9 @@ def test_get_scatter(unittest):
@pytest.mark.unit
-def test_get_chart_data(unittest, test_data):
+def test_get_chart_data(unittest, test_data, rolling_data):
+ import dtale.views as views
+
test_data = pd.DataFrame(build_ts_data(size=50), columns=['date', 'security_id', 'foo', 'bar'])
with app.test_client() as c:
with mock.patch('dtale.views.DATA', {c.port: test_data}):
@@ -589,10 +593,11 @@ def test_get_chart_data(unittest, test_data):
expected = {
u'data': {u'all': {
u'x': [946702800000, 946789200000, 946875600000, 946962000000, 947048400000],
- u'y': [50, 50, 50, 50, 50]
+ u'security_id': [50, 50, 50, 50, 50]
}},
- u'min': 50,
- u'max': 50
+ u'max': {'security_id': 50, 'x': 947048400000},
+ u'min': {'security_id': 50, 'x': 946702800000},
+ u'success': True,
}
unittest.assertEqual(response_data, expected, 'should return chart data')
@@ -603,11 +608,21 @@ def test_get_chart_data(unittest, test_data):
params = dict(x='date', y='security_id', group='baz', agg='mean')
response = c.get('/dtale/chart-data/{}'.format(c.port), query_string=params)
response_data = json.loads(response.data)
- assert response_data['min'] == 24.5
- assert response_data['max'] == 24.5
+ assert response_data['min']['security_id'] == 24.5
+ assert response_data['max']['security_id'] == 24.5
assert response_data['data']['baz']['x'][-1] == 947048400000
- assert len(response_data['data']['baz']['y']) == 5
- assert sum(response_data['data']['baz']['y']) == 122.5
+ assert len(response_data['data']['baz']['security_id']) == 5
+ assert sum(response_data['data']['baz']['security_id']) == 122.5
+
+ df, _ = views.format_data(rolling_data)
+ with app.test_client() as c:
+ with ExitStack() as stack:
+ stack.enter_context(mock.patch('dtale.views.DATA', {c.port: df}))
+ stack.enter_context(mock.patch('dtale.views.DTYPES', {c.port: views.build_dtypes_state(df)}))
+ params = dict(x='date', y='0', agg='rolling', rollingWin=10, rollingComp='count')
+ response = c.get('/dtale/chart-data/{}'.format(c.port), query_string=params)
+ response_data = json.loads(response.data)
+ assert response_data['success']
with app.test_client() as c:
with mock.patch('dtale.views.DATA', {c.port: test_data}):
@@ -642,6 +657,19 @@ def test_get_chart_data(unittest, test_data):
response_data['error'], 'query "security_id == 51" found no data, please alter'
)
+ df = pd.DataFrame([dict(a=i, b=i) for i in range(15500)])
+ df, _ = views.format_data(df)
+ with app.test_client() as c:
+ with ExitStack() as stack:
+ stack.enter_context(mock.patch('dtale.views.DATA', {c.port: df}))
+ stack.enter_context(mock.patch('dtale.views.DTYPES', {c.port: views.build_dtypes_state(df)}))
+ params = dict(x='a', y='b', allowDupes=True)
+ response = c.get('/dtale/chart-data/{}'.format(c.port), query_string=params)
+ response_data = json.loads(response.data)
+ unittest.assertEqual(
+ response_data['error'], 'Dataset exceeds 15,000 records, cannot render. Please apply filter...'
+ )
+
@pytest.mark.unit
def test_version_info():