Comments (6)
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.
from dashboard.
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.
from dashboard.
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.
from dashboard.
Do you mind adding a reproduction of what exactly you did. Also did you test server side?
from dashboard.
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>
from dashboard.
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!
from dashboard.
Related Issues (19)
- Dependency Dashboard
- Date Time Picker not responsive HOT 5
- SSR breaks because of createSharedComposable HOT 1
- Can you please provide an example with an select item in a modal? HOT 2
- Can't scroll on iOS after opening NavBar
- Do I need to purchase a license for personal use? HOT 5
- npm install errors HOT 1
- truncate UserDropdown HOT 1
- Fresh Install yields - WARN [Vue Router warn]: No match found for location with path "/_nuxt/" HOT 1
- How UDashboardSidebarLinks supports menus with three or more layers HOT 2
- More examples using tables HOT 1
- recommended way to mix with saas HOT 2
- Unable to find @ vueuse/nuxt @ 10.11.0 dependency. HOT 6
- Some example using the repository pattern HOT 2
- DashboardPanel breakpoint prop not working HOT 2
- Pre-tranform error when running the template HOT 5
- How to upgrade the SaaS template to make it compatible with the dashboard component?
- nuxt-ui-pro-dashboard doesn't start because of issue in app/pages/users.vue HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dashboard.