td-plots 1.3.1 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Histogram.d.ts +1 -0
- package/dist/index.esm.js +12 -7
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +11 -6
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -14,6 +14,7 @@ export type HistogramPlotProps = {
|
|
|
14
14
|
onDeselect?: () => void;
|
|
15
15
|
plotId?: string;
|
|
16
16
|
selectByBin?: boolean;
|
|
17
|
+
dateTickFormat?: string;
|
|
17
18
|
};
|
|
18
19
|
export declare const HistogramPlot: (props: HistogramPlotProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
20
|
export default HistogramPlot;
|
package/dist/index.esm.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __spreadArray, __assign } from 'tslib';
|
|
2
2
|
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import { lazy, useRef, useState, useMemo, Suspense } from 'react';
|
|
4
|
+
import { lazy, useRef, useState, useEffect, useMemo, Suspense } from 'react';
|
|
5
5
|
import emStyled from '@emotion/styled';
|
|
6
6
|
import { serializeStyles } from '@emotion/serialize';
|
|
7
7
|
import { css, keyframes } from '@emotion/react';
|
|
@@ -5840,13 +5840,19 @@ var Loading = function () {
|
|
|
5840
5840
|
var Plot$2 = lazy(function () { return import('react-plotly.js'); });
|
|
5841
5841
|
var HistogramPlot = function (props) {
|
|
5842
5842
|
var _a, _b;
|
|
5843
|
-
var data = props.data, title = props.title, xAxisTitle = props.xAxisTitle, _c = props.barColor, barColor = _c === void 0 ? 'rgb(72, 72, 74)' : _c, _d = props.unselectedBarColor, unselectedBarColor = _d === void 0 ? 'rgba(203, 195, 195, 0.88)' : _d, _e = props.selectorsColor, selectorsColor = _e === void 0 ? 'black' : _e, _f = props.showMeanLines, showMeanLines = _f === void 0 ? true : _f, containerStyleOverrides = props.containerStyleOverrides, _g = props.unselectedData, unselectedData = _g === void 0 ? [] : _g, _h = props.handleClickOrSelection, handleClickOrSelection = _h === void 0 ? function () { } : _h, _j = props.onDeselect, onDeselect = _j === void 0 ? function () { } : _j, plotId = props.plotId, _k = props.selectByBin, selectByBin = _k === void 0 ? false : _k;
|
|
5843
|
+
var data = props.data, title = props.title, xAxisTitle = props.xAxisTitle, _c = props.barColor, barColor = _c === void 0 ? 'rgb(72, 72, 74)' : _c, _d = props.unselectedBarColor, unselectedBarColor = _d === void 0 ? 'rgba(203, 195, 195, 0.88)' : _d, _e = props.selectorsColor, selectorsColor = _e === void 0 ? 'black' : _e, _f = props.showMeanLines, showMeanLines = _f === void 0 ? true : _f, containerStyleOverrides = props.containerStyleOverrides, _g = props.unselectedData, unselectedData = _g === void 0 ? [] : _g, _h = props.handleClickOrSelection, handleClickOrSelection = _h === void 0 ? function () { } : _h, _j = props.onDeselect, onDeselect = _j === void 0 ? function () { } : _j, plotId = props.plotId, _k = props.selectByBin, selectByBin = _k === void 0 ? false : _k, dateTickFormat = props.dateTickFormat;
|
|
5844
5844
|
// Ref for plot container
|
|
5845
5845
|
var containerRef = useRef(null);
|
|
5846
5846
|
// Track any selections made in this plot so we can style the selection box.
|
|
5847
5847
|
var _l = useState(null), selectedRange = _l[0], setSelectedRange = _l[1];
|
|
5848
|
+
// If all the data becomes selected, we should forget any old selections.
|
|
5849
|
+
useEffect(function () {
|
|
5850
|
+
if (unselectedData.length === 0) {
|
|
5851
|
+
setSelectedRange(null); // Clear selection box if all data is selected
|
|
5852
|
+
}
|
|
5853
|
+
}, [unselectedData]);
|
|
5848
5854
|
// Set the bins based on the entire data set.
|
|
5849
|
-
var nBins = Math.ceil(Math.sqrt(data.length + unselectedData.length));
|
|
5855
|
+
var nBins = (data.length + unselectedData.length) >= 10 ? Math.ceil(Math.sqrt(data.length + unselectedData.length)) : 0;
|
|
5850
5856
|
// Plotly determines "nice" bins which consequently means it internally decides the axis range. We need
|
|
5851
5857
|
// to access that information once the plot has been initialized so that we can prevent the
|
|
5852
5858
|
// axis range from changing during interaction. Dates use strings.
|
|
@@ -5863,10 +5869,7 @@ var HistogramPlot = function (props) {
|
|
|
5863
5869
|
if (range[0] === -1 && range[1] === 1) {
|
|
5864
5870
|
return;
|
|
5865
5871
|
}
|
|
5866
|
-
|
|
5867
|
-
? [new Date(range[0]), new Date(range[1])]
|
|
5868
|
-
: [range[0], range[1]];
|
|
5869
|
-
setFixedXAxisRange(computedRange);
|
|
5872
|
+
setFixedXAxisRange(range);
|
|
5870
5873
|
}
|
|
5871
5874
|
}
|
|
5872
5875
|
};
|
|
@@ -6118,6 +6121,8 @@ var HistogramPlot = function (props) {
|
|
|
6118
6121
|
linewidth: 1,
|
|
6119
6122
|
fixedrange: true, // Disable zooming
|
|
6120
6123
|
ticklabelposition: 'outside',
|
|
6124
|
+
tickformat: isDateArray(data) ? dateTickFormat : undefined, // Format ticks for dates
|
|
6125
|
+
automargin: true, // Adjust margin if tick labels rotate
|
|
6121
6126
|
},
|
|
6122
6127
|
yaxis: {
|
|
6123
6128
|
title: {
|