td-plots 1.2.3 → 1.3.1
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 -2
- package/dist/index.esm.js +9 -9
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +9 -9
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,8 +3,7 @@ import './plotStyles.scss';
|
|
|
3
3
|
export type HistogramPlotProps = {
|
|
4
4
|
data: number[] | Date[];
|
|
5
5
|
unselectedData?: number[] | Date[];
|
|
6
|
-
|
|
7
|
-
showAllDataMeanLine?: boolean;
|
|
6
|
+
showMeanLines?: boolean;
|
|
8
7
|
title?: string;
|
|
9
8
|
xAxisTitle?: string;
|
|
10
9
|
barColor?: string;
|
package/dist/index.esm.js
CHANGED
|
@@ -5840,17 +5840,17 @@ 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.
|
|
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;
|
|
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
|
-
var
|
|
5847
|
+
var _l = useState(null), selectedRange = _l[0], setSelectedRange = _l[1];
|
|
5848
5848
|
// Set the bins based on the entire data set.
|
|
5849
5849
|
var nBins = Math.ceil(Math.sqrt(data.length + unselectedData.length));
|
|
5850
5850
|
// Plotly determines "nice" bins which consequently means it internally decides the axis range. We need
|
|
5851
5851
|
// to access that information once the plot has been initialized so that we can prevent the
|
|
5852
5852
|
// axis range from changing during interaction. Dates use strings.
|
|
5853
|
-
var
|
|
5853
|
+
var _m = useState(undefined), fixedXAxisRange = _m[0], setFixedXAxisRange = _m[1];
|
|
5854
5854
|
// Once the plot is drawn, record the initial axis range so we can keep it fixed.
|
|
5855
5855
|
// figure should be Readonly<Plotly.Figure> but react-plotly.js doesn't expose that type, so we use any.
|
|
5856
5856
|
var handlePlotUpdate = function (figure, graphDiv) {
|
|
@@ -5866,7 +5866,6 @@ var HistogramPlot = function (props) {
|
|
|
5866
5866
|
var computedRange = typeof (range[0]) === 'string'
|
|
5867
5867
|
? [new Date(range[0]), new Date(range[1])]
|
|
5868
5868
|
: [range[0], range[1]];
|
|
5869
|
-
console.log('Captured range from onUpdate:', computedRange);
|
|
5870
5869
|
setFixedXAxisRange(computedRange);
|
|
5871
5870
|
}
|
|
5872
5871
|
}
|
|
@@ -5998,11 +5997,12 @@ var HistogramPlot = function (props) {
|
|
|
5998
5997
|
handleClickOrSelection(minValue, maxValue);
|
|
5999
5998
|
}
|
|
6000
5999
|
};
|
|
6001
|
-
console.log('fixed range', fixedXAxisRange);
|
|
6002
6000
|
// Create the selected range box
|
|
6003
6001
|
var selectedRangeBox = useMemo(function () {
|
|
6004
6002
|
if (!selectedRange)
|
|
6005
6003
|
return [];
|
|
6004
|
+
if (unselectedData.length === 0)
|
|
6005
|
+
return []; // Don't show the box if the entire dataset is selected.
|
|
6006
6006
|
// Create a multiply-like effect by using a semi-transparent dark overlay
|
|
6007
6007
|
var multiplyColor = 'rgba(29, 104, 185, 0.1)';
|
|
6008
6008
|
return [{
|
|
@@ -6019,7 +6019,7 @@ var HistogramPlot = function (props) {
|
|
|
6019
6019
|
},
|
|
6020
6020
|
layer: 'above' // Ensure the selection box is above the bars
|
|
6021
6021
|
}];
|
|
6022
|
-
}, [selectedRange]);
|
|
6022
|
+
}, [selectedRange, unselectedData]);
|
|
6023
6023
|
var unselectedTrace = {
|
|
6024
6024
|
x: unselectedData,
|
|
6025
6025
|
type: 'histogram',
|
|
@@ -6058,7 +6058,7 @@ var HistogramPlot = function (props) {
|
|
|
6058
6058
|
// Calculate the mean of the selected data using normalized data
|
|
6059
6059
|
var meanValue = (_a = calculateMean(data)) !== null && _a !== void 0 ? _a : 0; // Default to 0 if no data
|
|
6060
6060
|
var meanLineRadius = 0.01; // distance from the top of the y axis to the top/bottom end of the mean line
|
|
6061
|
-
var meanLine =
|
|
6061
|
+
var meanLine = (showMeanLines && data.length > 0) ? [{
|
|
6062
6062
|
type: 'line',
|
|
6063
6063
|
x0: meanValue,
|
|
6064
6064
|
y0: 1 - meanLineRadius,
|
|
@@ -6073,7 +6073,7 @@ var HistogramPlot = function (props) {
|
|
|
6073
6073
|
// Draw mean line for all data
|
|
6074
6074
|
var allData = __spreadArray(__spreadArray([], data, true), unselectedData, true);
|
|
6075
6075
|
var allDataMeanValue = (_b = calculateMean(allData)) !== null && _b !== void 0 ? _b : 0;
|
|
6076
|
-
var allDataMeanLine = (
|
|
6076
|
+
var allDataMeanLine = (showMeanLines && unselectedData.length > 0 && data.length > 0) ? [{
|
|
6077
6077
|
type: 'line',
|
|
6078
6078
|
x0: allDataMeanValue,
|
|
6079
6079
|
y0: 1 - meanLineRadius,
|
|
@@ -6142,7 +6142,7 @@ var HistogramPlot = function (props) {
|
|
|
6142
6142
|
dragmode: 'select', // Enable drag to select
|
|
6143
6143
|
selectdirection: 'h', // User can select in horizontal direction only
|
|
6144
6144
|
shapes: __spreadArray(__spreadArray(__spreadArray([], allDataMeanLine, true), meanLine, true), selectedRangeBox, true), // Add the mean line and selection box
|
|
6145
|
-
annotations: (
|
|
6145
|
+
annotations: (showMeanLines && meanLine && data.length > 0) ? [{
|
|
6146
6146
|
x: meanValue,
|
|
6147
6147
|
y: 1 + meanLineRadius + 0.04, // Position above the mean line. Value set with respect to the paper coordinates.
|
|
6148
6148
|
yref: 'paper',
|