StatsHouse UI: fix pack

show total and filled graph update
total line dark theme
remove dv param in single dash link
create new dash

Author: vauweb

statshouse-ui/src/store2/helpers/getPlotLink.ts

@@ -80,6 +80,7 @@ export function getPlotSingleLink(plotKey: PlotKey, params: QueryParams): string
           produce(params, (p) => {
             p.tabNum = plotKey;
             p.dashboardId = undefined;
+            p.dashboardVersion = undefined;
           })
         )
       ).toString()

statshouse-ui/src/store2/plotDataStore/changePlotParamForData.ts

@@ -1,6 +1,5 @@
-import { type PlotParams, type VariableParams } from 'url2';
+import { type PlotParams } from 'url2';
 import { dequal } from 'dequal/lite';
-import { useVariableChangeStatusStore } from '../variableChangeStatusStore';
 
 export function changePlotParamForData(plot?: PlotParams, prevPlot?: PlotParams) {
   return (
@@ -16,6 +15,8 @@ export function changePlotParamForData(plot?: PlotParams, prevPlot?: PlotParams)
     plot.maxHost !== prevPlot.maxHost ||
     plot.backendVersion !== prevPlot.backendVersion ||
     plot.type !== prevPlot.type ||
-    plot.prometheusCompat !== prevPlot.prometheusCompat
+    plot.prometheusCompat !== prevPlot.prometheusCompat ||
+    plot.totalLine !== prevPlot.totalLine ||
+    plot.filledGraph !== prevPlot.filledGraph
   );
 }

statshouse-ui/src/store2/plotDataStore/normalizePlotData.ts

@@ -21,6 +21,7 @@ import { calcYRange2 } from '../../common/calcYRange';
 import { getEmptyPlotData } from './getEmptyPlotData';
 import { deepClone } from '../../common/helpers';
 import { formatLegendValue, formatPercent, timeShiftToDash } from 'view/utils2';
+import { useThemeStore } from '../themeStore';
 
 export function normalizePlotData(
   response: SeriesResponse,
@@ -44,7 +45,7 @@ export function normalizePlotData(
     let series_data = [...response.series.series_data];
     const totalLineId = plot.totalLine ? series_meta.length : null;
     const totalLineLabel = 'Total';
-    const totalLineColor = '#333333';
+    const totalLineColor = useThemeStore.getState().dark ? '#999999' : '#333333';
     const prefColor = '9'; // it`s magic prefix
     const usedDashes = {};
     const usedBaseColors = {};

statshouse-ui/src/store2/urlStore/urlStore.ts

@@ -71,7 +71,6 @@ export type UrlStore = {
   addDashboardGroup(groupKey: GroupKey): void;
   removeDashboardGroup(groupKey: GroupKey): void;
   setDashboardGroup(groupKey: GroupKey, next: ProduceUpdate<GroupInfo>): void;
-  // moveDashboardPlot(index: PlotKey | null, indexTarget: PlotKey | null, indexGroup: GroupKey | null): void;
   setNextDashboardSchemePlot(nextScheme: { groupKey: GroupKey; plots: PlotKey[] }[]): void;
   autoSearchVariable(): Promise<Pick<QueryParams, 'variables' | 'orderVariables'>>;
   saveDashboard(): Promise<void>;
@@ -276,42 +275,6 @@ export const urlStore: StoreSlice<StatsHouseStore, UrlStore> = (setState, getSta
     setDashboardGroup(groupKey, next) {
       setUrlStore(updateGroup(groupKey, next));
     },
-    // moveDashboardPlot(plotKey, plotKeyTarget, groupKey) {
-    //   if (plotKey != null && groupKey != null) {
-    //     setUrlStore(
-    //       updateParamsPlotStruct((plotStruct) => {
-    //         const sourceGroupKey = plotStruct.mapPlotToGroup[plotKey] ?? '';
-    //         const sourceGroupIndex = plotStruct.mapGroupIndex[sourceGroupKey];
-    //         const sourcePlotIndex = plotStruct.mapPlotIndex[plotKey];
-    //         const targetGroupIndex = plotStruct.mapGroupIndex[groupKey ?? sourceGroupKey];
-    //         let targetPlotIndex = plotStruct.mapPlotIndex[plotKeyTarget ?? plotKey];
-    //         if (sourceGroupIndex != null && sourcePlotIndex != null) {
-    //           const sourcePlots = plotStruct.groups[sourceGroupIndex].plots.splice(sourcePlotIndex, 1);
-    //           if (targetGroupIndex == null) {
-    //             plotStruct.groups.push({
-    //               plots: [...sourcePlots],
-    //               groupInfo: {
-    //                 ...getNewGroup(),
-    //                 id: groupKey,
-    //               },
-    //             });
-    //           } else {
-    //             if (targetPlotIndex) {
-    //               if (sourceGroupIndex === targetGroupIndex) {
-    //                 targetPlotIndex = plotStruct.groups[targetGroupIndex].plots.findIndex(
-    //                   ({ plotInfo }) => plotInfo.id === plotKeyTarget
-    //                 );
-    //               }
-    //               plotStruct.groups[targetGroupIndex].plots.splice(targetPlotIndex, 0, ...sourcePlots);
-    //             } else {
-    //               plotStruct.groups[targetGroupIndex].plots.push(...sourcePlots);
-    //             }
-    //           }
-    //         }
-    //       })
-    //     );
-    //   }
-    // },
     setNextDashboardSchemePlot(nextScheme) {
       setUrlStore(
         updateParamsPlotStruct((plotStruct) => {
@@ -358,6 +321,7 @@ export const urlStore: StoreSlice<StatsHouseStore, UrlStore> = (setState, getSta
         setUrlStore((store) => {
           store.saveParams = saveParams;
           store.params.dashboardVersion = saveParams.dashboardVersion;
+          store.params.dashboardId = saveParams.dashboardId;
         });
       }
     },

statshouse-ui/src/url2/url.test.ts

@@ -57,11 +57,11 @@ const params2: QueryParams = {
 };
 
 describe('urlStore', () => {
-  test.skip('urlEncode => urlDecode', () => {
+  test('urlEncode => urlDecode', () => {
     expect(urlDecode(toTreeObj(arrToObj(urlEncode(params))), params)).toEqual(params);
   });
   test('urlEncode => urlDecode save', () => {
-    // expect(urlDecode(toTreeObj(arrToObj(urlEncode(params2, params))), params)).toEqual(params2);
+    expect(urlDecode(toTreeObj(arrToObj(urlEncode(params2, params))), params)).toEqual(params2);
     expect(urlDecode(toTreeObj(arrToObj(urlEncode(params, params2))), params2)).toEqual(params);
   });
 });