Skip to content

Commit

Permalink
Hotfix/ improve tables/charts (#5228)
Browse files Browse the repository at this point in the history 
* improve charts, tables

* update

---------

Co-authored-by: James Maslek <[email protected]>
  • Loading branch information
@tehcoderer @jmaslek
tehcoderer and jmaslek authored Jul 19, 2023
1 parent 8b00778 commit 41ef3d4
Show file tree
Hide file tree
Showing 18 changed files with 1,690 additions and 5,537 deletions.
14 changes: 6 additions & 8 deletions frontend-components/plotly/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ declare global {
}

function App() {
const [data, setData] = useState(
const [json_data, setData] = useState(
process.env.NODE_ENV === "production" ? null : candlestickMockup,
);
const [options, setOptions] = useState({});
Expand All @@ -28,9 +28,9 @@ function App() {
if (process.env.NODE_ENV === "production") {
const interval = setInterval(() => {
if (window.json_data) {
const data = window.json_data;
console.log(data);
setData(data);
const plotly_json = window.json_data;
console.log(plotly_json);
setData(plotly_json);
clearInterval(interval);
}
}, 100);
Expand Down Expand Up @@ -79,10 +79,8 @@ function App() {
// to make sure that the legend is not cut off
data.data.forEach(function (trace) {
if (trace.name !== undefined) {
const name_length = trace.name.length;
trace.name = `${trace.name} `;
trace.hoverlabel = {
namelength: name_length,
namelength: -1,
};
}
});
Expand All @@ -103,7 +101,7 @@ function App() {
};
};

const transformedData = transformData(data);
const transformedData = transformData(json_data);

if (transformedData) {
if (transformedData.posthog.collect_logs && !options) {
Expand Down
122 changes: 83 additions & 39 deletions frontend-components/plotly/src/components/AutoScaling.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,20 @@
//@ts-nocheck
import { Figure } from "react-plotly.js";

export const isoDateRegex = new RegExp(
"^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}",
);

function merge(target, source) {
Object.keys(source).forEach((key) => {
if (typeof source[key] === "object") {
Object.assign(source[key], merge(target[key], source[key]));
}
});
Object.assign(target || {}, source);
return target;
}

export default async function autoScaling(
eventdata: Readonly<Plotly.PlotRelayoutEvent>,
graphs: Figure,
Expand All @@ -9,23 +23,34 @@ export default async function autoScaling(
if (eventdata["xaxis.range[0]"] !== undefined) {
const x_min = eventdata["xaxis.range[0]"];
const x_max = eventdata["xaxis.range[1]"];
let x0_min = x_min;
let x1_max = x_max;

if (isoDateRegex.test(x_min.replace(" ", "T").split(".")[0])) {
x0_min = new Date(x_min.replace(" ", "T").split(".")[0]);
x1_max = new Date(x_max.replace(" ", "T").split(".")[0]);
}

const to_update = {};
const yaxis_fixedrange = [];
let y_min;
let y_max;
let y_min: number;
let y_max: number;
let min_xrange: any;

const get_all_yaxis_traces = {};
const get_all_yaxis_annotations = {};
let volumeTraceYaxis = null;

const yaxis_unique = [
...new Set(
graphs.data.map((trace) => {
if (
trace.yaxis ||
trace.y !== undefined ||
trace.type === "candlestick"
) {
graphs.data.map((trace: Plotly.PlotData) => {
if (trace.y !== undefined || trace.type === "candlestick") {
if (
trace.yaxis === undefined &&
trace?.name?.trim() !== "Volume"
) {
trace.yaxis = "y";
}
if (trace.type === "bar" && trace?.name?.trim() === "Volume") {
volumeTraceYaxis = `yaxis${trace.yaxis.replace("y", "")}`;
}
Expand All @@ -38,7 +63,7 @@ export default async function autoScaling(
),
];

graphs.layout.annotations.map((annotation, i) => {
graphs.layout.annotations.map((annotation: any, i: number) => {
if (annotation.yref !== undefined && annotation.yref !== "paper") {
annotation.index = i;
const yaxis = `yaxis${annotation.yref.replace("y", "")}`;
Expand Down Expand Up @@ -73,45 +98,53 @@ export default async function autoScaling(
}
}

const yx_values = x.map((x, i) => {
let out = null;
const isoDateRegex = new RegExp(
"^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}",
);
if (isoDateRegex.test(x)) {
const x_time = new Date(x).getTime();
const x0_min = new Date(x_min.replace(" ", "T")).getTime();
const x1_max = new Date(x_max.replace(" ", "T")).getTime();
if (x_time >= x0_min && x_time <= x1_max) {
const yx_values = x.map(
(x: string | number | Date, i: string | number) => {
let out = null;

if (isoDateRegex.test(x.toString())) {
const x_time = new Date(x).getTime();
if (x_time >= x0_min.getTime() && x_time <= x1_max.getTime()) {
if (trace2.y !== undefined && y[i] !== undefined) {
out = y[i];
}
if (trace2.type === "candlestick") {
y_candle.push(y_low[i]);
y_candle.push(y_high[i]);
}
if (!min_xrange || x_time < min_xrange) {
min_xrange = x_time;
}
}
} else if (x >= x_min && x <= x_max) {
if (trace2.y !== undefined) {
out = y[i];
}
if (trace2.type === "candlestick") {
y_candle.push(y_low[i]);
y_candle.push(y_high[i]);
}
if (!min_xrange || x < min_xrange) {
min_xrange = x;
}
}
} else if (x >= x_min && x <= x_max) {
if (trace2.y !== undefined) {
out = y[i];
}
if (trace2.type === "candlestick") {
y_candle.push(y_low[i]);
y_candle.push(y_high[i]);
}
}
return out;
});
return out;
},
);

y_values = y_values.concat(yx_values);
});

y_values = y_values.filter((y2) => y2 !== undefined && y2 !== null);
y_values = y_values
.flat()
.filter((y2) => y2 !== undefined && y2 !== null);
y_min = Math.min(...y_values);
y_max = Math.max(...y_values);

if (y_candle.length > 0) {
y_candle = y_candle.filter((y2) => y2 !== undefined && y2 !== null);
y_candle = y_candle
.flat()
.filter((y2) => y2 !== undefined && y2 !== null);
y_min = Math.min(...y_candle);
y_max = Math.max(...y_candle);
}
Expand All @@ -127,19 +160,24 @@ export default async function autoScaling(

y_min -= y_range * y_mult;
y_max += y_range * y_mult;
if (to_update[yaxis] === undefined) {
to_update[yaxis] = {};
}

if (yaxis === volumeTraceYaxis) {
if (graphs.layout[yaxis].tickvals !== undefined) {
const range_x = 7;
const volume_ticks = org_y_max;
let round_digits = -3;
// @ts-ignore
let first_val = Math.round(volume_ticks * 0.2, round_digits);
const x_zipped = [2, 5, 6, 7, 8, 9, 10];
const y_zipped = [1, 4, 5, 6, 7, 8, 9];

for (let i = 0; i < x_zipped.length; i++) {
if (String(volume_ticks).length > x_zipped[i]) {
round_digits = -y_zipped[i];
// @ts-ignore
first_val = Math.round(volume_ticks * 0.2, round_digits);
}
}
Expand All @@ -151,16 +189,16 @@ export default async function autoScaling(
];
const volume_range = [0, Math.floor(volume_ticks * range_x)];

to_update[`${yaxis}.tickvals`] = tickvals;
to_update[`${yaxis}.range`] = volume_range;
to_update[`${yaxis}.tickformat`] = ".2s";
to_update[yaxis].tickvals = tickvals;
to_update[yaxis].range = volume_range;
to_update[yaxis].tickformat = ".2s";
return;
}
y_min = 0;
y_max = graphs.layout[yaxis].range[1];
}
to_update[`${yaxis}.range`] = [y_min, y_max];
to_update[`${yaxis}.fixedrange`] = true;
to_update[yaxis].range = [y_min, y_max];
to_update[yaxis].fixedrange = true;
yaxis_fixedrange.push(yaxis);

if (get_all_yaxis_annotations[yaxis] !== undefined) {
Expand All @@ -172,14 +210,20 @@ export default async function autoScaling(
y_max - y_range * 0.2,
);

to_update[`annotations[${annotation.index}].ay`] = yshift_new;
if (to_update.annotations === undefined) {
to_update.annotations = graphs.layout.annotations;
}

to_update.annotations[annotation.index].ay = yshift_new;
}
});
}
}
});

return { to_update, yaxis_fixedrange };
graphs.layout = merge(graphs.layout, to_update);

return { to_update: graphs.layout, yaxis_fixedrange };
}
} catch (e) {
console.log(`Error in AutoScaling: ${e}`);
Expand Down
Loading

0 comments on commit 41ef3d4

Please sign in to comment.