Skip to content

Commit

Permalink
Charts QA fixes.
Browse files Browse the repository at this point in the history 
- 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
  • Loading branch information
@andresgutgon
andresgutgon committed Mar 18, 2024
1 parent ebfe5a1 commit 0ce9cf2
Show file tree
Hide file tree
Showing 50 changed files with 914 additions and 271 deletions.
2 changes: 1 addition & 1 deletion apps/server/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"preview": "vite preview",
"prettier": "prettier --write src/**/*.ts src/**/*.svelte",
"test": "svelte-kit sync && vitest --run",
"test:watch": "vitest",
"test:watch": "vitest --watch",
"lint": "eslint .",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --output human-verbose",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
Expand Down
4 changes: 3 additions & 1 deletion apps/server/src/routes/api/queries/[...query]/+server.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ export async function GET({
status: 200,
})
} catch (e) {
return handleError(e as Error)
const isPro = import.meta.env.PROD
const clientError = isPro ? new Error('There was an error in this query') : e as Error
return handleError(clientError)
}
}

Expand Down
14 changes: 14 additions & 0 deletions apps/server/src/routes/api/queries/[...query]/server.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,4 +133,18 @@ describe('GET endpoint', () => {
expect(response.status).toBe(404)
expect(await response.text()).toBe('Query file not found')
})

it('return generic error when is production', async () => {
import.meta.env.PROD = true
mockRunQuery.mockRejectedValue(new Error('Query execution failed'))

const response = await GET({
params: { query: 'testQuery' },
url: new URL('http://localhost'),
})

expect(response.status).toBe(500)
expect(await response.text()).toBe('There was an error in this query')
})

})
1 change: 1 addition & 0 deletions apps/server/vite.config.ts
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
22 changes: 22 additions & 0 deletions packages/client/core/src/theme/assets/latitude.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,28 @@
@tailwind utilities;

@layer base {
.custom-scrollbar {
/** Make scrollbar to not take space **/
overflow: overlay !important;
}
.custom-scrollbar::-webkit-scrollbar {
@apply w-5 h-5;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
@apply bg-gray-400;
@apply rounded-full bg-clip-padding border-solid;
@apply border-transparent border-[6px];
}

.custom-scrollbar::-webkit-scrollbar-track {
background-color: transparent;
}

.custom-scrollbar::-webkit-scrollbar-corner {
background-color: transparent;
}

* {
@apply border-border;
}
Expand Down
16 changes: 11 additions & 5 deletions packages/client/core/src/theme/ui/alert/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@ import { cn } from '../../utils'

export type Variant = VariantProps<typeof alertVariants>['variant']
export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
export type Props = {
variant: Variant
scrollable?: boolean
className?: string | null
}

export const alertVariants = tv({
base: 'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
Expand All @@ -21,14 +26,15 @@ export const alertVariants = tv({
function rootCssClass({
variant,
className,
}: {
variant: Variant
className?: string | null
}) {
scrollable = false
}: Props) {
return cn(
alertVariants({ variant }),
'text-sm [&_p]:leading-relaxed',
className
className,
{
'overflow-y-auto custom-scrollbar': scrollable,
}
)
}

Expand Down
47 changes: 41 additions & 6 deletions packages/client/core/src/theme/ui/card/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,48 @@
import { tv, type VariantProps } from 'tailwind-variants'
import { cn } from '../../utils'

type CardType = VariantProps<typeof cardRootVariants>['type']
const NORMAL_PADDING = 'p-6'

const cardRootVariants = tv({
base: 'rounded-xl bg-card text-card-foreground ',
variants: {
type: {
normal: 'border shadow',
invisible: ''
},
}
})

const cardHeaderVariants = tv({
base: 'flex flex-col space-y-1.5',
variants: {
type: {
normal: NORMAL_PADDING,
invisible: 'pb-6'
}
}
})

const cardContentVariants = tv({
base: '',
variants: {
type: {
normal: 'p-6 pt-0',
invisible: ''
}
}
})

type ClassProps = { className?: string | null | undefined }
export type CardProps = ClassProps & { type?: CardType }

export function rootCssClass({ className }: ClassProps) {
return cn('rounded-xl border bg-card text-card-foreground shadow', className)
export function rootCssClass({ type = 'normal', className }: CardProps) {
return cn(cardRootVariants({ type }), className)
}

export function headerCssClass({ className }: ClassProps) {
return cn('flex flex-col space-y-1.5 p-6', className)
export function headerCssClass({ type = 'normal', className }: CardProps) {
return cn(cardHeaderVariants({ type }) , className)
}

export function titleCssClass({ className }: ClassProps) {
Expand All @@ -18,8 +53,8 @@ export function descriptionCssClass({ className }: ClassProps) {
return cn('text-sm text-muted-foreground', className)
}

export function contentCssClass({ className }: ClassProps) {
return cn('p-6 pt-0', className)
export function contentCssClass({ type = 'normal', className }: CardProps) {
return cn(cardContentVariants({ type }), className)
}

export function footerCssClass({ className }: ClassProps) {
Expand Down
23 changes: 18 additions & 5 deletions packages/client/core/src/theme/ui/chart/config/cartesian/__mocks__/data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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: [],
Expand All @@ -140,6 +153,6 @@ export const testData = {
trigger: 'axis',
axisPointer: { type: 'cross' },
},
legend: { type: 'scroll', show: false, align: 'left', left: 40 },
grid: { containLabel: true, left: 40, right: 8, top: 8, bottom: 32 },
legend: { type: 'scroll', show: false, align: 'left', left: 48 },
grid: { containLabel: true, left: 48, right: 32, top: 48, bottom: 32 },
}
7 changes: 4 additions & 3 deletions packages/client/core/src/theme/ui/chart/config/cartesian/getColumns.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}
Expand Down Expand Up @@ -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)
})
}

Expand Down
66 changes: 33 additions & 33 deletions packages/client/core/src/theme/ui/chart/config/cartesian/index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,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}',
Expand Down Expand Up @@ -96,7 +96,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}',
Expand All @@ -107,7 +107,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}',
Expand Down Expand Up @@ -153,9 +153,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,
Expand Down Expand Up @@ -221,7 +222,7 @@ describe('generateConfig', () => {
},
{
...testData.series[0],
encode: { x: 0, y: 2 },
encode: { x: 'country', y: 'shows' },
label: {
...testData.series[0]?.label,
formatter: '{@2}',
Expand Down Expand Up @@ -252,54 +253,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],
],
},
],
Expand All @@ -311,7 +311,7 @@ describe('generateConfig', () => {
},
{
...testData.series[0],
encode: { x: 0, y: 2 },
encode: { x: 'country', y: 'shows' },
label: {
...testData.series[0]?.label,
formatter: '{@2}',
Expand Down Expand Up @@ -344,7 +344,7 @@ describe('generateConfig', () => {
{
...testData.series[0],
yAxisIndex: 0,
encode: { x: 1, y: 0 },
encode: { x: 'movies_1', y: 'country' },
},
],
xAxis: [
Expand Down
Loading

0 comments on commit 0ce9cf2

Please sign in to comment.