jayeshchoudhary commented on code in PR #16390:
URL: https://github.com/apache/pinot/pull/16390#discussion_r2218336560
##########
pinot-controller/src/main/resources/app/components/Query/TimeseriesQueryPage.tsx:
##########
@@ -106,8 +113,75 @@ const useStyles = makeStyles((theme) => ({
padding: theme.spacing(1),
minWidth: 0,
},
+
}));
+// Extract warning component
+const TruncationWarning: React.FC<{ totalSeries: number; truncatedSeries:
number }> = ({
+ totalSeries,
+ truncatedSeries
+}) => {
+ if (totalSeries <= truncatedSeries) return null;
+
+ return (
+ <Alert severity="warning" style={{ marginBottom: '16px' }}>
+ <Typography variant="body2">
+ Large dataset detected: Showing first {truncatedSeries} of
{totalSeries} series for visualization.
+ Switch to JSON view to see the complete dataset.
+ </Typography>
Review Comment:
please share a screenshot of how this looks
##########
pinot-controller/src/main/resources/app/utils/TimeseriesUtils.ts:
##########
@@ -0,0 +1,154 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ChartSeries, TimeseriesData, ChartDataPoint, MetricStats } from
'Models';
+
+/**
+ * Parse Prometheus-compatible timeseries response
+ */
+export const parseTimeseriesResponse = (response: any): ChartSeries[] => {
+ if (!response || !response.data || !response.data.result) {
+ return [];
+ }
Review Comment:
avoid use of any if possible
##########
pinot-controller/src/main/resources/app/components/Query/TimeseriesChart.tsx:
##########
@@ -0,0 +1,224 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useMemo } from 'react';
+import ReactECharts from 'echarts-for-react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Typography, Paper } from '@material-ui/core';
+import { ChartSeries } from 'Models';
+import { getSeriesColor, MAX_SERIES_LIMIT } from '../../utils/ChartConstants';
+
+// Extract chart configuration functions
+const createChartSeries = (series: ChartSeries[], selectedMetric?: string) => {
+ const limitedSeries = series.slice(0, MAX_SERIES_LIMIT);
+
+ return limitedSeries.map((s, index) => {
+ const isSelected = selectedMetric ? s.name === selectedMetric : true;
+
+ return {
+ name: s.name,
+ type: 'line',
+ data: s.data.map(dp => [dp.timestamp, dp.value]),
+ smooth: false,
+ symbol: 'circle',
+ symbolSize: isSelected ? 8 : 4,
+ lineStyle: {
+ width: 1,
+ color: getSeriesColor(index),
+ opacity: isSelected ? 1 : 0,
+ },
+ itemStyle: {
+ color: getSeriesColor(index),
+ opacity: isSelected ? 1 : 0,
+ },
+ emphasis: {
+ focus: 'none',
+ scale: false,
+ },
+ };
+ });
+};
+
+const createTooltipFormatter = (selectedMetric?: string) => {
+ return function (params: any) {
Review Comment:
restrict the use of any if possible
##########
pinot-controller/src/main/resources/app/utils/ChartConstants.ts:
##########
@@ -0,0 +1,40 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// Standard chart colors matching the ECharts palette
+export const CHART_COLORS = [
+ "#5470C6", "#91CC75", "#EE6666", "#FAC858", "#73C0DE",
+ "#3BA272", "#FC8452", "#9A60B4", "#EA7CCC", "#6E7074",
+ "#546570", "#C4CCD3", "#F05B72", "#FF715E", "#FFAF51",
+ "#FFE153", "#47B39C", "#5BACE1", "#32C5E9", "#96BFFF"
+];
+
+/**
+ * Maximum number of series that can be rendered in the chart
+ */
+export const MAX_SERIES_LIMIT = 20;
Review Comment:
do we show warning at both places chart and table when the limit exceeds ?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
