enchance ai

dashboard/components/CardTitled.vue

@@ -9,10 +9,10 @@ const props = defineProps<{ title: string, sub?: string }>();
         <div class="flex flex-col gap-4">
             <div class="flex items-center">
                 <div class="flex flex-col grow">
-                    <div class="poppins font-semibold text-[1.1rem] md:text-[1.4rem] text-text">
+                    <div class="poppins font-semibold text-[1rem] md:text-[1.3rem] text-text">
                         {{ props.title }}
                     </div>
-                    <div v-if="props.sub" class="poppins text-[.8rem] md:text-[1.1rem] text-text-sub">
+                    <div v-if="props.sub" class="poppins text-[.7rem] md:text-[1rem] text-text-sub">
                         {{ props.sub }}
                     </div>
                 </div>

dashboard/components/SelectButton.vue

@@ -16,10 +16,10 @@ const emits = defineEmits<{
 
 <template>
 
-    <div class="flex gap-2 border-[1px] border-gray-400 p-1 md:p-2 rounded-xl">
+    <div class="flex gap-2 border-[1px] border-lyx-widget-lighter p-1 md:p-2 rounded-xl bg-lyx-widget">
         <div @click="$emit('changeIndex', index)" v-for="(opt, index) of options"
-            class="hover:bg-white/10 select-btn-animated cursor-pointer rounded-lg poppins font-semibold px-2 md:px-3 py-1 text-[.8rem] md:text-[1rem]"
-            :class="{ 'bg-accent hover:!bg-accent': currentIndex == index }">
+            class="hover:bg-lyx-widget-lighter/60 select-btn-animated cursor-pointer rounded-lg poppins font-regular px-2 md:px-3 py-1 text-[.8rem] md:text-[1rem]"
+            :class="{ 'bg-lyx-widget-lighter hover:!bg-lyx-widget-lighter': currentIndex == index }">
             {{ opt.label }}
         </div>
     </div>

dashboard/components/analyst/ComposableChart.vue

@@ -5,14 +5,16 @@ import * as datefns from 'date-fns';
 
 registerChartComponents();
 
+const errored = ref<boolean>(false);
+
 const props = defineProps<{
     labels: string[],
-    title:string,
+    title: string,
     datasets: {
         points: number[],
         color: string,
-        type: string,
-        name:string
+        chartType: string,
+        name: string
     }[]
 }>();
 
@@ -46,7 +48,7 @@ const chartOptions = ref<ChartOptions<'line'>>({
     },
     plugins: {
         legend: { display: true },
-        title: { 
+        title: {
             display: true,
             text: props.title
         },
@@ -67,7 +69,11 @@ const chartOptions = ref<ChartOptions<'line'>>({
 
 const chartData = ref<ChartData<'line'>>({
     labels: props.labels.map(e => {
-        return datefns.format(new Date(e), 'dd/MM');
+        try {
+            return datefns.format(new Date(e), 'dd/MM');
+        } catch (ex) {
+            return e;
+        }
     }),
     datasets: props.datasets.map(e => ({
         data: e.points,
@@ -82,7 +88,7 @@ const chartData = ref<ChartData<'line'>>({
         hoverBackgroundColor: e.color,
         hoverBorderColor: 'white',
         hoverBorderWidth: 2,
-        type: e.type
+        type: e.chartType
     } as any))
 });
 
@@ -106,10 +112,18 @@ function createGradient(startColor: string) {
 }
 
 onMounted(async () => {
-
-    chartData.value.datasets.forEach(dataset => {
-        dataset.backgroundColor = [createGradient(dataset.borderColor as string)]
-    });
+    try {
+        chartData.value.datasets.forEach(dataset => {
+            if (dataset.borderColor && dataset.borderColor.toString().startsWith('#')) {
+                dataset.backgroundColor = [createGradient(dataset.borderColor as string)]
+            } else {
+                dataset.backgroundColor = [createGradient('#3d59a4')]
+            }
+        });
+    } catch (ex) {
+        errored.value = true;
+        console.error(ex);
+    }
 
 });
 
@@ -117,5 +131,8 @@ onMounted(async () => {
 
 
 <template>
-    <LineChart ref="lineChartRef" v-bind="lineChartProps"> </LineChart>
+    <div>
+        <div v-if="errored"> ERROR CREATING CHART </div>
+        <LineChart v-if="!errored" ref="lineChartRef" v-bind="lineChartProps"> </LineChart>
+    </div>
 </template>

dashboard/components/dashboard/ActionableChart.vue

@@ -262,17 +262,25 @@ onMounted(async () => {
 <template>
     <CardTitled title="Trend chart" sub="Easily match Visits, Unique sessions and Events trends." class="w-full">
         <template #header>
-            <SelectButton class="w-fit" @changeIndex="selectedLabelIndex = $event" :currentIndex="selectedLabelIndex"
-                :options="selectLabels">
-            </SelectButton>
+                <SelectButton class="w-fit" @changeIndex="selectedLabelIndex = $event"
+                    :currentIndex="selectedLabelIndex" :options="selectLabels">
+                </SelectButton>
         </template>
 
-        <div class="flex gap-6 w-full justify-end">
-            <div v-for="(dataset, index) of chartData.datasets" class="flex gap-2 items-center text-[.9rem]">
-                <UCheckbox :ui="{
-                    color: `text-[${legendColors[index]}]`
-                }" :model-value="true" @change="onLegendChange(dataset, index, $event)"></UCheckbox>
-                <label class="mt-[2px]"> {{ dataset.label }} </label>
+        <div class="flex gap-6 w-full justify-between">
+            <LyxUiButton type="secondary" to="/analyst">
+                <div class="flex items-center gap-2 px-10">
+                    <i class="far fa-sparkles text-yellow-400"></i>
+                    <div class="poppins text-lyx-text"> Ask AI </div>
+                </div>
+            </LyxUiButton>
+            <div class="flex gap-6">
+                <div v-for="(dataset, index) of chartData.datasets" class="flex gap-2 items-center text-[.9rem]">
+                    <UCheckbox :ui="{
+                        color: `text-[${legendColors[index]}]`
+                    }" :model-value="true" @change="onLegendChange(dataset, index, $event)"></UCheckbox>
+                    <label class="mt-[2px]"> {{ dataset.label }} </label>
+                </div>
             </div>
         </div>