Skip to content

Commit

Permalink
Histogram
Browse files Browse the repository at this point in the history
  • Loading branch information
@deecay
deecay committed Sep 18, 2023
1 parent 650ec90 commit cc3b194
Show file tree
Hide file tree
Showing 8 changed files with 111 additions and 50 deletions.
8 changes: 2 additions & 6 deletions viz-lib/src/visualizations/chart/Editor/AxisSettings.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
import { isString, isObject, isFinite, isNumber, merge } from "lodash";
import { isString, isObject, merge } from "lodash";
import React from "react";
import { useDebouncedCallback } from "use-debounce";
import * as Grid from "antd/lib/grid";
import { Section, Select, Input, InputNumber, ContextHelp } from "@/components/visualizations/editor";

function toNumber(value: any) {
value = isNumber(value) ? value : parseFloat(value);
return isFinite(value) ? value : null;
}
import { toNumber } from "../plotly/utils";

type OwnProps = {
id: string;
Expand Down
1 change: 1 addition & 0 deletions viz-lib/src/visualizations/chart/Editor/ChartTypeSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { visualizationsSettings } from "@/visualizations/visualizationsSettings"
const allChartTypes = [
{ type: "line", name: "Line", icon: "line-chart" },
{ type: "column", name: "Bar", icon: "bar-chart" },
{ type: "histogram", name: "Histogram", icon: "bar-chart" },
{ type: "area", name: "Area", icon: "area-chart" },
{ type: "pie", name: "Pie", icon: "pie-chart" },
{ type: "scatter", name: "Scatter", icon: "circle-o" },
Expand Down
4 changes: 2 additions & 2 deletions viz-lib/src/visualizations/chart/Editor/GeneralSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,7 +293,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }: any)
label="Stacking"
data-test="Chart.Stacking"
defaultValue={options.series.stacking}
disabled={!includes(["line", "area", "column"], options.globalSeriesType)}
disabled={!includes(["line", "area", "column", "histogram"], options.globalSeriesType)}
onChange={(stacking: any) => onOptionsChange({ series: { stacking } })}>
{/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
<Select.Option value={null} data-test="Chart.Stacking.Disabled">
Expand All @@ -309,7 +309,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }: any)
</Section>
)}

{includes(["line", "area", "column"], options.globalSeriesType) && (
{includes(["line", "area", "column", "histogram"], options.globalSeriesType) && (
// @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message
<Section>
<Checkbox
Expand Down
31 changes: 29 additions & 2 deletions viz-lib/src/visualizations/chart/Editor/XAxisSettings.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { includes } from "lodash";
import React from "react";
import { Section, Switch } from "@/components/visualizations/editor";
import { Section, InputNumber, Switch } from "@/components/visualizations/editor";
import { EditorPropTypes } from "@/visualizations/prop-types";
import { toNumber } from "../plotly/utils";

import AxisSettings from "./AxisSettings";

Expand All @@ -15,7 +17,32 @@ export default function XAxisSettings({ options, onOptionsChange }: any) {
onChange={(xAxis: any) => onOptionsChange({ xAxis })}
/>

{/* @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
{includes(["histogram"], options.globalSeriesType) && (
<React.Fragment>
<Section>
<InputNumber
label="Bin Size"
className="w-100"
placeholder="Auto"
data-test="Chart.XAxis.BinSize"
defaultValue={options.binSize}
onChange={binSize => onOptionsChange({ binSize: toNumber(binSize) })}
/>
</Section>

<Section>
<InputNumber
label="Bin Start"
className="w-100"
placeholder="Auto"
data-test="Chart.XAxis.BinStart"
defaultValue={options.binStart}
onChange={binStart => onOptionsChange({ binStart: toNumber(binStart) })}
/>
</Section>
</React.Fragment>
)}

<Section>
{/* @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
<Switch
Expand Down
40 changes: 23 additions & 17 deletions viz-lib/src/visualizations/chart/getChartData.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { isNil, isObject, each, forOwn, sortBy, values } from "lodash";
import { isNil, isObject, isEmpty, each, forOwn, sortBy, values } from "lodash";

function addPointToSeries(point: any, seriesCollection: any, seriesName: any) {
if (seriesCollection[seriesName] === undefined) {
Expand Down Expand Up @@ -75,25 +75,31 @@ export default function getChartData(data: any, options: any) {
});

if (isNil(seriesName)) {
each(yValues, (yValue, ySeriesName) => {
if (options.globalSeriesType === "histogram" && isEmpty(yValues)) {
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ x: number; y: never; $raw: any; }' is not ... Remove this comment to see the full error message
point = { x: xValue, y: yValue, $raw: point.$raw };
if (eValue !== null) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'yError' does not exist on type '{ $raw: ... Remove this comment to see the full error message
point.yError = eValue;
}
point = { x: xValue, y: null, $raw: point.$raw };
addPointToSeries(point, series, "Count");
} else {
each(yValues, (yValue, ySeriesName) => {
// @ts-expect-error ts-migrate(2322) FIXME: Type '{ x: number; y: never; $raw: any; }' is not ... Remove this comment to see the full error message
point = { x: xValue, y: yValue, $raw: point.$raw };
if (eValue !== null) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'yError' does not exist on type '{ $raw: ... Remove this comment to see the full error message
point.yError = eValue;
}

if (sizeValue !== null) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'size' does not exist on type '{ $raw: an... Remove this comment to see the full error message
point.size = sizeValue;
}
if (sizeValue !== null) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'zVal' does not exist on type '{ $raw: an... Remove this comment to see the full error message
point.size = sizeValue;
}

if (zValue !== null) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'zVal' does not exist on type '{ $raw: an... Remove this comment to see the full error message
point.zVal = zValue;
}
addPointToSeries(point, series, ySeriesName);
});
if (zValue !== null) {
// @ts-expect-error ts-migrate(2339) FIXME: Property 'zVal' does not exist on type '{ $raw: an... Remove this comment to see the full error message
point.zVal = zValue;
}
addPointToSeries(point, series, ySeriesName);
});
}
} else {
addPointToSeries(point, series, seriesName);
}
Expand Down
20 changes: 20 additions & 0 deletions viz-lib/src/visualizations/chart/plotly/prepareDefaultData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,23 @@ function prepareBoxSeries(series: any, options: any, { seriesColor }: any) {
return series;
}

function prepareHistogramSeries(series: any, options: any) {
series.type = 'histogram';
series.hoverinfo = 'x+y+name';

if (!isNil(options.binSize)) {
series.autobinx = false;
series.xbins = series.xbins || {};
series.xbins.size = options.binSize;
}
if (!isNil(options.binStart)) {
series.autobinx = false;
series.xbins = series.xbins || {};
series.xbins.start = options.binStart;
}
return series;
}

function prepareSeries(series: any, options: any, additionalOptions: any) {
const { hoverInfoPattern, index } = additionalOptions;

Expand Down Expand Up @@ -148,6 +165,9 @@ function prepareSeries(series: any, options: any, additionalOptions: any) {
return prepareBubbleSeries(plotlySeries, options, additionalOptions);
case "box":
return prepareBoxSeries(plotlySeries, options, additionalOptions);
case 'histogram':
// @ts-expect-error ts-migrate(2554) FIXME: Expected 2 arguments, but got 3.
return prepareHistogramSeries(plotlySeries, options, additionalOptions);
default:
return plotlySeries;
}
Expand Down
50 changes: 28 additions & 22 deletions viz-lib/src/visualizations/chart/plotly/updateData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,31 +101,37 @@ function updateSeriesText(seriesList: any, options: any) {

function updatePercentValues(seriesList: any, options: any) {
if (options.series.percentValues) {
// Some series may not have corresponding x-values;
// do calculations for each x only for series that do have that x
const sumOfCorrespondingPoints = new Map();
each(seriesList, series => {
series.sourceData.forEach((item: any) => {
const sum = sumOfCorrespondingPoints.get(item.x) || 0;
sumOfCorrespondingPoints.set(item.x, sum + Math.abs(item.y || 0.0));
if (options.globalSeriesType === "histogram") {
each(seriesList, (series) => {
series.histnorm = "probability";
});
});

each(seriesList, series => {
const yValues: any = [];

series.sourceData.forEach((item: any) => {
if (isNil(item.y) && !options.missingValuesAsZero) {
item.yPercent = null;
} else {
const sum = sumOfCorrespondingPoints.get(item.x);
item.yPercent = (item.y / sum);
}
yValues.push(item.yPercent);
} else {
// Some series may not have corresponding x-values;
// do calculations for each x only for series that do have that x
const sumOfCorrespondingPoints = new Map();
each(seriesList, series => {
series.sourceData.forEach((item: any) => {
const sum = sumOfCorrespondingPoints.get(item.x) || 0;
sumOfCorrespondingPoints.set(item.x, sum + Math.abs(item.y || 0.0));
});
});

series.y = yValues;
});
each(seriesList, series => {
const yValues: any = [];

series.sourceData.forEach((item: any) => {
if (isNil(item.y) && !options.missingValuesAsZero) {
item.yPercent = null;
} else {
const sum = sumOfCorrespondingPoints.get(item.x);
item.yPercent = (item.y / sum);
}
yValues.push(item.yPercent);
});

series.y = yValues;
});
}
}
}

Expand Down
7 changes: 6 additions & 1 deletion viz-lib/src/visualizations/chart/plotly/utils.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { isUndefined } from "lodash";
import { isUndefined, isNumber, isFinite } from "lodash";
import moment from "moment";
// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'plot... Remove this comment to see the full error message
import plotlyCleanNumber from "plotly.js/src/lib/clean_number";
Expand All @@ -7,6 +7,11 @@ export function cleanNumber(value: any) {
return isUndefined(value) ? value : plotlyCleanNumber(value);
}

export function toNumber(value: any) {
value = isNumber(value) ? value : parseFloat(value);
return isFinite(value) ? value : null;
}

export function getSeriesAxis(series: any, options: any) {
const seriesOptions = options.seriesOptions[series.name] || { type: options.globalSeriesType };
if (seriesOptions.yAxis === 1 && (!options.series.stacking || seriesOptions.type === "line")) {
Expand Down

0 comments on commit cc3b194

Please sign in to comment.