Charts QA fixes.

- Add sort prop - Chart should have a title and description prop - Truncated X axis in mixed charts - Make the charts animate to the new state instead of flicker - Error display as in old latitude
latitude-dev · Mar 15, 2024 · f2d1b06 · f2d1b06
1 parent ebfe5a1
commit f2d1b06
Show file tree

Hide file tree

Showing 32 changed files with 403 additions and 143 deletions.
diff --git a/apps/server/vite.config.ts b/apps/server/vite.config.ts
@@ -1,5 +1,6 @@
 import { sveltekit } from '@sveltejs/kit/vite'
 import { defineConfig } from 'vite'
+
 // eslint-disable-next-line
 // @ts-ignore
 import autoImport from '@latitude-data/sveltekit-autoimport'

diff --git a/packages/client/core/.eslintrc.cjs b/packages/client/core/.eslintrc.cjs
@@ -1,7 +1,4 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
-  extends: ['@latitude-data/eslint-config/library.js'],
-  parserOptions: {
-    project: true,
-  },
+  extends: ['@latitude-data/eslint-config/library.js']
 }
diff --git a/packages/client/core/src/index.ts b/packages/client/core/src/index.ts
@@ -7,6 +7,8 @@ export * as theme from './theme'
 export * from './data/api'
 export * from './stores/queries'
 
+export { DEFAULT_ANIMATION } from './theme/ui/chart/config/cartesian'
+
 export type CartesianChartProps = CartesianChartPropsOriginal
 export type PieChartProps = PieChartPropsOriginal
 export type FunnelChartProps = FunnelChartPropsOriginal

diff --git a/packages/client/core/src/theme/ui/chart/config/cartesian/__mocks__/data.ts b/packages/client/core/src/theme/ui/chart/config/cartesian/__mocks__/data.ts
@@ -15,14 +15,26 @@ const RAW_DATASET = [
   ['IN', '78', '21', '11'],
 ]
 const OUTPUT_DATASET = RAW_DATASET.map((row) =>
-  row.map((cell) => (cell === null ? 'null' : cell)),
+  row.map((cell) => {
+    if (cell === null) return 0
+
+    const cellVal = Number(cell)
+    if (isNaN(cellVal)) return cell
+
+    return cellVal
+  }),
 ) as DBSource
 export const FIELDS = RAW_DATASET[0] as string[]
 export const SOURCE = RAW_DATASET.slice(1) as DBSource
 export const DATASET = { fields: FIELDS, source: SOURCE }
 export const testData = {
   animation: true,
-  dataset: [{ sourceHeader: true, source: OUTPUT_DATASET }],
+  animationEasing: 'cubicInOut',
+  animationEasingUpdate: 'cubicInOut',
+  dataset: [{
+    dimensions: FIELDS,
+    source: OUTPUT_DATASET.slice(1)
+  }],
   xAxis: [
     {
       show: true,
@@ -124,7 +136,8 @@ export const testData = {
       areaStyle: { opacity: 0 },
       connectNulls: true,
       label: { position: 'top', show: false, formatter: '{@1}' },
-      encode: { x: 0, y: 1 },
+      datasetIndex: 0,
+      encode: { x: 'country', y: 'movies_1' },
     },
   ],
   dataZoom: [],

diff --git a/packages/client/core/src/theme/ui/chart/config/cartesian/getColumns.ts b/packages/client/core/src/theme/ui/chart/config/cartesian/getColumns.ts
@@ -17,9 +17,10 @@ function buildColumnString(column: string, chartType: CartesianChartType) {
   }
 }
 
-function buildColumnObject(column: Column) {
+function buildColumnObject(column: Column, chartType: CartesianChartType) {
   return {
     ...column,
+    chartType: column?.chartType ?? chartType,
     displayName: column?.displayName ?? column.name,
     axisIndex: column?.axisIndex ?? 0,
   }
@@ -61,10 +62,10 @@ function completeColumn({
   if (typeof column === 'string') {
     return completeStringColumn({ column, chartType, fields })
   }
-  if (!isWildcard(column.name)) return buildColumnObject(column)
+  if (!isWildcard(column.name)) return buildColumnObject(column, chartType)
 
   return filterByWildcard(fields, column.name).map((name) => {
-    return buildColumnObject({ ...column, name })
+    return buildColumnObject({ ...column, name }, chartType)
   })
 }
 

diff --git a/packages/client/core/src/theme/ui/chart/config/cartesian/index.test.ts b/packages/client/core/src/theme/ui/chart/config/cartesian/index.test.ts
@@ -2,6 +2,7 @@ import { describe, it, expect } from 'vitest'
 import generateConfig from './index'
 import { DATASET, testData } from './__mocks__/data'
 
+const { animationEasing: _ae, animationEasingUpdate: _aeu, ...animationData } = testData;
 describe('generateConfig', () => {
   it('simple config', () => {
     expect(
@@ -30,7 +31,7 @@ describe('generateConfig', () => {
         y: 'movies_1',
       }),
     ).toEqual({
-      ...testData,
+      ...animationData,
       animation: false,
       series: [
         {
@@ -55,7 +56,7 @@ describe('generateConfig', () => {
           ...testData.series[0],
           name: 'shows',
           xAxisIndex: 0,
-          encode: { x: 0, y: 2 },
+          encode: { x: 'country', y: 'shows' },
           label: {
             ...testData.series[0]?.label,
             formatter: '{@2}',
@@ -96,7 +97,7 @@ describe('generateConfig', () => {
         {
           ...testData.series[0],
           xAxisIndex: 0,
-          encode: { x: 0, y: 3 },
+          encode: { x: 'country', y: 'movies_2' },
           label: {
             ...testData.series[0]?.label,
             formatter: '{@3}',
@@ -107,7 +108,7 @@ describe('generateConfig', () => {
         {
           ...testData.series[0],
           name: 'shows',
-          encode: { x: 0, y: 2 },
+          encode: { x: 'country', y: 'shows' },
           label: {
             ...testData.series[0]?.label,
             formatter: '{@2}',
@@ -153,9 +154,10 @@ describe('generateConfig', () => {
   it('only line charts', () => {
     expect(
       generateConfig({
+        chartType: 'line',
         dataset: DATASET,
         x: 'country',
-        y: { name: 'movies_1', chartType: 'line' },
+        y: { name: 'movies_1' },
       }),
     ).toEqual({
       ...testData,
@@ -211,7 +213,7 @@ describe('generateConfig', () => {
         yFormat: { stack: true },
       }),
     ).toEqual({
-      ...testData,
+      ...animationData,
       animation: false,
       series: [
         {
@@ -221,7 +223,7 @@ describe('generateConfig', () => {
         },
         {
           ...testData.series[0],
-          encode: { x: 0, y: 2 },
+          encode: { x: 'country', y: 'shows' },
           label: {
             ...testData.series[0]?.label,
             formatter: '{@2}',
@@ -252,54 +254,53 @@ describe('generateConfig', () => {
       ...testData,
       dataset: [
         {
-          sourceHeader: true,
+          dimensions: ['country', 'movies_1', 'shows', 'movies_2'],
           source: [
-            ['country', 'movies_1', 'shows', 'movies_2'],
-            ['CN', '0', '0.970873786407767', '0.02912621359223301'],
-            ['TW', '0', '0.970873786407767', '0.02912621359223301'],
+            ['CN', 0, 0.970873786407767, 0.02912621359223301],
+            ['TW', 0, 0.970873786407767, 0.02912621359223301],
             [
               'KR',
-              '0.019417475728155338',
-              '0.9514563106796117',
-              '0.02912621359223301',
+              0.019417475728155338,
+              0.9514563106796117,
+              0.02912621359223301,
             ],
             [
               'JP',
-              '0.09803921568627451',
-              '0.8725490196078431',
-              '0.029411764705882353',
+              0.09803921568627451,
+              0.8725490196078431,
+              0.029411764705882353,
             ],
             [
               'GB',
-              '0.12745098039215685',
-              '0.8431372549019608',
-              '0.029411764705882353',
+              0.12745098039215685,
+              0.8431372549019608,
+              0.029411764705882353,
             ],
             [
               'ES',
-              '0.1568627450980392',
-              '0.8137254901960784',
-              '0.029411764705882353',
+              0.1568627450980392,
+              0.8137254901960784,
+              0.029411764705882353,
             ],
             [
               'US',
-              '0.20588235294117646',
-              '0.7647058823529411',
-              '0.029411764705882353',
+              0.20588235294117646,
+              0.7647058823529411,
+              0.029411764705882353,
             ],
             [
               'CA',
-              '0.23148148148148148',
-              '0.6944444444444444',
-              '0.07407407407407407',
+              0.23148148148148148,
+              0.6944444444444444,
+              0.07407407407407407,
             ],
             [
               'AU',
-              '0.2616822429906542',
-              '0.6635514018691588',
-              '0.07476635514018691',
+              0.2616822429906542,
+              0.6635514018691588,
+              0.07476635514018691,
             ],
-            ['IN', '0.7090909090909091', '0.19090909090909092', '0.1'],
+            ['IN', 0.7090909090909091, 0.19090909090909092, 0.1],
           ],
         },
       ],
@@ -311,7 +312,7 @@ describe('generateConfig', () => {
         },
         {
           ...testData.series[0],
-          encode: { x: 0, y: 2 },
+          encode: { x: 'country', y: 'shows' },
           label: {
             ...testData.series[0]?.label,
             formatter: '{@2}',
@@ -344,7 +345,7 @@ describe('generateConfig', () => {
         {
           ...testData.series[0],
           yAxisIndex: 0,
-          encode: { x: 1, y: 0 },
+          encode: { x: 'movies_1', y: 'country' },
         },
       ],
       xAxis: [