Bug with switching modes "dark, light" on Safari in Dashboard UI-Pro template about dashboard

[moshetanzer]

Hey @shehab267 great. Yeah. Will definitely take a better look. The problem seems to be a hydration type of issue. You still could keep the component. Just for now use only as a client side or fully server side. Need to check if issue is in the color module, nuxt ui, or general server component issue.

[shehab267]

Hi, @moshetanzer @benjamincanac
I removed the HomeChart component as suggested, and the issue disappeared. Can we address and fix the issue within the component?

Awaiting your guidance on next steps.

[shehab267]

Hey @shehab267 great. Yeah. Will definitely take a better look. The problem seems to be a hydration type of issue. You still could keep the component. Just for now use only as a client side or fully server side. Need to check if issue is in the color module, nuxt ui, or general server component issue.

Thanks for the info! I tried rendering the component on the client side only, but the issue still persists.

[moshetanzer]

Do you mind adding a reproduction of what exactly you did. Also did you test server side?

[Ctron-Dev]

hey i just tried it

homechart component when ran as server didn't render the data.

but after comenting out the library code "unovis/vue" the issue was gone

so i was trying to croner the issue and i am pretty much sure its from the library

this is the homechart componant after removing the library code

<script setup lang="ts">
import {
  eachDayOfInterval,
  eachWeekOfInterval,
  eachMonthOfInterval,
  format,
} from 'date-fns';

import type {Period, Range} from '~/types';

const cardRef = ref<HTMLElement | null>(null);

const props = defineProps({
  period: {
    type: String as PropType<Period>,
    required: true,
  },
  range: {
    type: Object as PropType<Range>,
    required: true,
  },
});

type DataRecord = {
  date: Date;
  amount: number;
};

const {width} = useElementSize(cardRef);

// We use `useAsyncData` here to have same random data on the client and server
const {data} = await useAsyncData<DataRecord[]>(
  async () => {
    const dates = {
      daily: eachDayOfInterval,
      weekly: eachWeekOfInterval,
      monthly: eachMonthOfInterval,
    }[props.period](props.range);

    const min = 1000;
    const max = 10000;

    return dates.map((date) => ({
      date,
      amount: Math.floor(Math.random() * (max - min + 1)) + min,
    }));
  },
  {
    watch: [() => props.period, () => props.range],
    default: () => [],
  },
);

const x = (_: DataRecord, i: number) => i;
const y = (d: DataRecord) => d.amount;

const total = computed(() =>
  data.value.reduce((acc: number, {amount}) => acc + amount, 0),
);

const formatNumber = new Intl.NumberFormat('en', {
  style: 'currency',
  currency: 'USD',
  maximumFractionDigits: 0,
}).format;

const formatDate = (date: Date): string => {
  return {
    daily: format(date, 'd MMM'),
    weekly: format(date, 'd MMM'),
    monthly: format(date, 'MMM yyy'),
  }[props.period];
};

const xTicks = (i: number) => {
  if (i === 0 || i === data.value.length - 1 || !data.value[i]) {
    return '';
  }

  return formatDate(data.value[i].date);
};

const template = (d: DataRecord) =>
  `${formatDate(d.date)}: ${formatNumber(d.amount)}`;
</script>

<template>
  <UDashboardCard ref="cardRef" :ui="{body: {padding: '!pb-3 !px-0'} as any}">
    <template #header>
      <div>
        <p class="mb-1 text-sm font-medium text-gray-500 dark:text-gray-400">
          Revenue
        </p>
        <p class="text-3xl font-semibold text-gray-900 dark:text-white">
          {{ formatNumber(total) }}
        </p>
      </div>
    </template>
  </UDashboardCard>
</template>

[shehab267]

Hi @moshetanzer,

I hope you are well. I am following up to inquire about any updates regarding this issue. Your assistance is much appreciated.

Thank you!