fix: hourly chart popover now drown "on top" so that you always see t…

…he full popover. Should also fix the popover not hiding
Akylas · Dec 11, 2024 · 6b6ba51 · 6b6ba51
1 parent 2f093e6
commit 6b6ba51
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 21 deletions.
diff --git a/app/components/HourlyChartView.svelte b/app/components/HourlyChartView.svelte
@@ -7,6 +7,7 @@
     import { LimitLine } from '@nativescript-community/ui-chart/components/LimitLine';
     import { XAxisPosition } from '@nativescript-community/ui-chart/components/XAxis';
     import { CombinedData } from '@nativescript-community/ui-chart/data/CombinedData';
+    import type HourlyPopover__SvelteComponent_ from '~/components/HourlyPopover.svelte';
     import { LineData } from '@nativescript-community/ui-chart/data/LineData';
     import { LineDataSet, Mode } from '@nativescript-community/ui-chart/data/LineDataSet';
     import { ScatterData } from '@nativescript-community/ui-chart/data/ScatterData';
@@ -29,7 +30,7 @@
     import dayjs from 'dayjs';
     import { onDestroy, onMount } from 'svelte';
     import { iconService } from '~/services/icon';
-    import { WeatherProps, appPaint, convertWeatherValueToUnit, getWeatherDataColor, getWeatherDataTitle, weatherDataService } from '~/services/weatherData';
+    import { WeatherProps, appPaint, convertWeatherValueToUnit, getWeatherDataColor, getWeatherDataTitle, showHourlyPopover, weatherDataService } from '~/services/weatherData';
     // import { fade } from '@shared/utils/svelte/ui';
     import { generateGradient, loadImage } from '~/utils/utils.common';
 
@@ -59,6 +60,7 @@
 
 <script lang="ts">
     import HourlyPopover from './HourlyPopover.svelte';
+    import { ComponentInstanceInfo } from '~/utils/ui';
 
     let { colorBackground, colorOnSurface, colorOnSurfaceVariant, colorOutline, colorSurfaceContainer } = $colors;
     $: ({ colorBackground, colorOnSurface, colorOnSurfaceVariant, colorOutline, colorSurfaceContainer } = $colors);
@@ -321,7 +323,7 @@
                             if (k === WeatherProps.iconId || k === WeatherProps.windBearing) {
                                 result['setFakeKey'] = 1;
                             } else if (k === WeatherProps.precipAccumulation) {
-                                // result[k] = convertWeatherValueToUnit(d, k, { round: false })[0];
+                                // result.snow = convertWeatherValueToUnit(d, k, { round: false })[0];
                             } else if (k === WeatherProps.temperature) {
                                 // result[k] = convertWeatherValueToUnit(d, k, { round: false })[0];
                                 tempMin = Math.min(tempMin, d[k]);
@@ -408,7 +410,6 @@
                             set.scatterShapeSize = 4;
                             // set.scatterShapeSize=(enabled ? 4 : 0);
                             set.color = setColor;
-                            set['hasValueTextColor'] = hasCustomColor;
                             // set.fillColor=(color);
                             scatterDataSets.push(set);
                             break;
@@ -447,7 +448,6 @@
                         default: {
                             const set = new LineDataSet(data, key, 'deltaHours', key === WeatherProps.iconId || key === WeatherProps.windBearing ? 'setFakeKey' : key);
                             set.color = setColor;
-                            set['hasValueTextColor'] = hasCustomColor;
                             switch (key) {
                                 case WeatherProps.windSpeed:
                                     set.getEntryIcon = function (entry) {
@@ -641,13 +641,41 @@
             chart.highlight(highlights);
         }
     }
+    let popoverInstance: HourlyPopover__SvelteComponent_;
+    async function showPopover(item, highlightedMargin) {
+        try {
+            if (popoverInstance) {
+                popoverInstance.$set({ item });
+                return;
+            }
+            DEV_LOG && console.log('showPopover', highlightedMargin);
+            await showHourlyPopover(
+                item,
+                {},
+                {
+                    anchor: chartView?.nativeView,
+                    onDismiss: () => {
+                        popoverInstance = null;
+                        highlightedItem = null;
+                    },
+                    x: highlightedMargin
+                },
+                (data: ComponentInstanceInfo) => {
+                    popoverInstance = data.viewInstance as any;
+                }
+            );
+        } catch (error) {
+            showError(error);
+        }
+    }
     function onHighlight({ highlight, object }: { object: CombinedChart; highlight: Highlight }) {
         const popoverWidth = 150 * $fontScale;
         const fullWidth = Utils.layout.toDeviceIndependentPixels(chartView.nativeView.getMeasuredWidth());
         const highlightedX = highlight.xPx;
         highlightedAlignment = highlightedX >= fullWidth - popoverWidth ? 'right' : 'left';
         highlightedMargin = highlightedAlignment === 'left' ? `40 0 0 ${highlightedX}` : `40 ${fullWidth - highlightedX} 0 0`;
         highlightedItem = hourly[highlight.x] as CommonWeatherData;
+        showPopover(highlightedItem, highlightedX > fullWidth / 2 ? 0 : fullWidth * 2);
     }
     function clearHighlight() {
         highlightedItem = null;
@@ -801,9 +829,9 @@
         on:pan={clearHighlight}
         on:zoom={clearHighlight}>
     </combinedchart>
-    {#if highlightedItem}
+    <!-- {#if highlightedItem}
         <HourlyPopover horizontalAlignment={highlightedAlignment} item={highlightedItem} margin={highlightedMargin} on:tap={clearHighlight} />
-    {/if}
+    {/if} -->
     <!-- {#if currentHighlight}
         <nestedscrollview
             backgroundColor={new Color(colorBackground).setAlpha(220)}

diff --git a/app/components/WeatherPage.svelte b/app/components/WeatherPage.svelte
@@ -122,7 +122,7 @@
                         }
                     ] as any)
                 );
-                if (isBRABounds(weatherLocation)) {
+                if (weatherLocation.timezone === 'Europe/Paris' && isBRABounds(weatherLocation)) {
                     options.push({
                         icon: 'mdi-snowflake-alert',
                         id: 'bra',
@@ -492,6 +492,7 @@
         try {
             const item = event as DailyData;
             const component = (await import('~/components/DailyPage.svelte')).default;
+            DEV_LOG && console.log('onTap', item.time, item.timezoneOffset);
             //we need to offset back the startOf/endOf to correctly get local utc values
             const startOfDay = getStartOfDay(item.time, item.timezoneOffset).valueOf();
             const endOfDay = getEndOfDay(item.time, item.timezoneOffset).valueOf();

diff --git a/app/services/weatherData.ts b/app/services/weatherData.ts
@@ -614,7 +614,6 @@ export class DataService extends Observable {
                             textPaint.setTextSize(11 * fontScale);
                             if (data.customDrawColor) {
                                 textPaint.setColor(data.customDrawColor);
-
                             }
                             const staticLayout = new StaticLayout(
                                 withIcon
@@ -762,21 +761,25 @@ export const weatherDataService = new DataService();
 export async function showHourlyPopover(
     item: CommonWeatherData,
     props?: Partial<ComponentProps<HourlyPopover__SvelteComponent_>>,
-    options?: Partial<PopoverOptions<ComponentProps<HourlyPopover__SvelteComponent_>>>
+    options?: Partial<PopoverOptions<ComponentProps<HourlyPopover__SvelteComponent_>>>,
+    onCreated?
 ) {
     const HourlyPopover = (await import('~/components/HourlyPopover.svelte')).default;
-    await showPopover({
-        view: HourlyPopover,
-        vertPos: VerticalPosition.ALIGN_TOP,
-        horizPos: HorizontalPosition.ALIGN_LEFT,
-        focusable: false,
-        hideArrow: true,
-        props: {
-            item,
-            ...(props || {})
+    return showPopover(
+        {
+            view: HourlyPopover,
+            vertPos: VerticalPosition.ALIGN_TOP,
+            horizPos: HorizontalPosition.ALIGN_LEFT,
+            focusable: false,
+            hideArrow: true,
+            props: {
+                item,
+                ...(props || {})
+            },
+            ...(options || {})
         },
-        ...(options || {})
-    });
+        onCreated
+    );
 }
 
 export function convertWeatherValueToUnit(item: CommonWeatherData, key: WeatherProps, options?: { prefix?: string; join?: string; unitScale?: number; roundedTo05?: boolean; round?: boolean }) {

diff --git a/app/utils/ui/index.common.ts b/app/utils/ui/index.common.ts
@@ -48,12 +48,13 @@ export async function showPopoverMenu<T = any>({
     closeOnClose = true,
     horizPos,
     onChange,
+    onCheckBox,
     onClose,
     onLongPress,
     options,
     props,
     vertPos
-}: { options; anchor; onClose?; onLongPress?; props?; closeOnClose?; onChange? } & Partial<PopoverOptions>) {
+}: { options; anchor; onClose?; onCheckBox?; onLongPress?; props?; closeOnClose?; onChange? } & Partial<PopoverOptions>) {
     const { colorSurfaceContainer } = get(colors);
     const OptionSelect = (await import('~/components/common/OptionSelect.svelte')).default;
     const rowHeight = (props?.rowHeight ?? 58) * get(fontScale);
@@ -75,6 +76,7 @@ export async function showPopoverMenu<T = any>({
             width: 200 * get(fontScale),
             options,
             onLongPress,
+            onCheckBox,
             onChange,
             onClose: async (item) => {
                 if (closeOnClose) {