From 3b4b4c775470f8844a68610c711a4a724943af57 Mon Sep 17 00:00:00 2001 From: Lars Reimann Date: Mon, 27 Jun 2022 16:37:34 +0200 Subject: [PATCH 1/5] feat(gui): improve contract of charts in dark mode --- api-editor/gui/package.json | 2 +- .../selectionView/ParameterView.tsx | 31 ++- .../features/statistics/ApiSizeStatistics.tsx | 8 +- .../ApiSizeVsUsefulnessStatistics.tsx | 50 ++-- .../src/features/statistics/ChartWrappers.tsx | 77 +++++- .../statistics/ProgressStatistics.tsx | 24 +- .../features/statistics/QualityStatistics.tsx | 76 ++++++ .../features/statistics/StatisticsView.tsx | 2 + api-editor/gui/src/theme/index.d.ts | 248 ++++++++++-------- 9 files changed, 355 insertions(+), 163 deletions(-) create mode 100644 api-editor/gui/src/features/statistics/QualityStatistics.tsx diff --git a/api-editor/gui/package.json b/api-editor/gui/package.json index 5e9c4819f..7dac6ad59 100644 --- a/api-editor/gui/package.json +++ b/api-editor/gui/package.json @@ -8,7 +8,7 @@ "serve": "vite preview", "test": "jest src", "test-with-coverage": "jest src --coverage", - "gen:theme-typings": "chakra-cli tokens src/theme/index.ts -- out src/theme/index.d.ts", + "gen:theme-typings": "chakra-cli tokens src/theme/index.ts --out src/theme/index.d.ts", "postinstall": "npm run gen:theme-typings" }, "prettier": "@lars-reimann/prettier-config", diff --git a/api-editor/gui/src/features/packageData/selectionView/ParameterView.tsx b/api-editor/gui/src/features/packageData/selectionView/ParameterView.tsx index 7e19d4736..ed1e2586f 100644 --- a/api-editor/gui/src/features/packageData/selectionView/ParameterView.tsx +++ b/api-editor/gui/src/features/packageData/selectionView/ParameterView.tsx @@ -1,4 +1,4 @@ -import { Box, Heading, Stack, Text as ChakraText } from '@chakra-ui/react'; +import { Box, Heading, Stack, Text as ChakraText, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; import { PythonParameter } from '../model/PythonParameter'; import { ParameterNode } from './ParameterNode'; @@ -54,7 +54,7 @@ export const ParameterView: React.FC = function ({ pythonPar Most Common Values - {createBarChart(parameterUsages)} + )} @@ -62,7 +62,14 @@ export const ParameterView: React.FC = function ({ pythonPar ); }; -const createBarChart = function (parameterUsages: Map): React.ReactElement { +interface CustomBarChartProps { + parameterUsages: Map; +} + +const CustomBarChart: React.FC = function ({ parameterUsages }) { + const gridColor = useColorModeValue('#BBB', '#555'); + const textColor = useColorModeValue('#000', '#FFF'); + const options = { indexAxis: 'y' as const, elements: { @@ -82,6 +89,24 @@ const createBarChart = function (parameterUsages: Map): React.Re intersect: false, }, }, + scales: { + x: { + grid: { + color: gridColor, + }, + ticks: { + color: textColor, + } + }, + y: { + grid: { + color: gridColor, + }, + ticks: { + color: textColor, + } + }, + }, }; const sortedParameterUsages = new Map([...parameterUsages.entries()].sort((a, b) => b[1] - a[1])); diff --git a/api-editor/gui/src/features/statistics/ApiSizeStatistics.tsx b/api-editor/gui/src/features/statistics/ApiSizeStatistics.tsx index 4413cd78e..88bf3edb2 100644 --- a/api-editor/gui/src/features/statistics/ApiSizeStatistics.tsx +++ b/api-editor/gui/src/features/statistics/ApiSizeStatistics.tsx @@ -3,9 +3,9 @@ import { Box, Flex, Heading } from '@chakra-ui/react'; import { useAppSelector } from '../../app/hooks'; import { selectRawPythonPackage } from '../packageData/apiSlice'; import { selectUsages } from '../usages/usageSlice'; -import { createBarChart } from './ChartWrappers'; import { PythonPackage } from '../packageData/model/PythonPackage'; import { UsageCountStore } from '../usages/model/UsageCountStore'; +import { CustomBarChart } from './ChartWrappers'; export const ApiSizeStatistics = function () { const rawPythonPackage = useAppSelector(selectRawPythonPackage); @@ -15,15 +15,15 @@ export const ApiSizeStatistics = function () { const classLabels = ['full', 'public', 'used']; const classValues = getClassValues(rawPythonPackage, usages, usedThreshold); - const classBarChart = createBarChart(classLabels, classValues, 'Classes'); + const classBarChart = ; const functionLabels = ['full', 'public', 'used']; const functionValues = getFunctionValues(rawPythonPackage, usages, usedThreshold); - const functionBarChart = createBarChart(functionLabels, functionValues, 'Functions'); + const functionBarChart = ; const parameterLabels = ['full', 'public', 'used', 'useful']; const parameterValues = getParameterValues(rawPythonPackage, usages, usedThreshold); - const parameterBarChart = createBarChart(parameterLabels, parameterValues, 'Parameters'); + const parameterBarChart = ; return ( <> diff --git a/api-editor/gui/src/features/statistics/ApiSizeVsUsefulnessStatistics.tsx b/api-editor/gui/src/features/statistics/ApiSizeVsUsefulnessStatistics.tsx index 734df1ecb..0d6a3b2f5 100644 --- a/api-editor/gui/src/features/statistics/ApiSizeVsUsefulnessStatistics.tsx +++ b/api-editor/gui/src/features/statistics/ApiSizeVsUsefulnessStatistics.tsx @@ -3,7 +3,7 @@ import { Box, Flex, Heading } from '@chakra-ui/react'; import { useAppSelector } from '../../app/hooks'; import { selectRawPythonPackage } from '../packageData/apiSlice'; import { selectUsages } from '../usages/usageSlice'; -import { createLineChart } from './ChartWrappers'; +import { CustomLineChart } from './ChartWrappers'; export const ApiSizeVsUsefulnessStatistics = function () { const rawPythonPackage = useAppSelector(selectRawPythonPackage); @@ -11,29 +11,35 @@ export const ApiSizeVsUsefulnessStatistics = function () { const thresholds = [...Array(26).keys()]; thresholds.shift(); - const classLineChart = createLineChart( - usages, - rawPythonPackage, - thresholds, - usages.getNumberOfUsedPublicClasses, - 'Classes', - 'Minimum usefulness', + const classLineChart = ( + ); - const functionLineChart = createLineChart( - usages, - rawPythonPackage, - thresholds, - usages.getNumberOfUsedPublicFunctions, - 'Functions', - 'Minimum usefulness', + const functionLineChart = ( + ); - const parameterLineChart = createLineChart( - usages, - rawPythonPackage, - thresholds, - usages.getNumberOfUsefulPublicParameters, - 'Parameters', - 'Minimum usefulness', + const parameterLineChart = ( + ); return ( diff --git a/api-editor/gui/src/features/statistics/ChartWrappers.tsx b/api-editor/gui/src/features/statistics/ChartWrappers.tsx index 264abcf17..f806ad804 100644 --- a/api-editor/gui/src/features/statistics/ChartWrappers.tsx +++ b/api-editor/gui/src/features/statistics/ChartWrappers.tsx @@ -1,6 +1,6 @@ import { UsageCountStore } from '../usages/model/UsageCountStore'; import { PythonPackage } from '../packageData/model/PythonPackage'; -import React, { ReactElement } from 'react'; +import React from 'react'; import { Bar, Line } from 'react-chartjs-2'; import { ArcElement, @@ -13,10 +13,20 @@ import { Title, Tooltip, } from 'chart.js'; +import { useColorModeValue } from '@chakra-ui/react'; ChartJS.register(ArcElement, CategoryScale, PointElement, LineElement, LinearScale, BarElement, Title, Tooltip); -export const createBarChart = function (labels: string[], values: number[], title: string): ReactElement { +interface CustomBarChartProps { + labels: string[]; + values: number[]; + title: string; +} + +export const CustomBarChart: React.FC = function ({ labels, values, title }) { + const gridColor = useColorModeValue('#BBB', '#555'); + const textColor = useColorModeValue('#000', '#FFF'); + const options = { indexAxis: 'y' as const, elements: { @@ -32,6 +42,7 @@ export const createBarChart = function (labels: string[], values: number[], titl title: { display: true, text: title, + color: textColor, }, tooltip: { interaction: { @@ -40,6 +51,24 @@ export const createBarChart = function (labels: string[], values: number[], titl intersect: false, }, }, + scales: { + x: { + grid: { + color: gridColor, + }, + ticks: { + color: textColor, + }, + }, + y: { + grid: { + color: gridColor, + }, + ticks: { + color: textColor, + }, + }, + }, }; const dataValues = new Map(); @@ -61,14 +90,26 @@ export const createBarChart = function (labels: string[], values: number[], titl return ; }; -export const createLineChart = function ( - usages: UsageCountStore, - pythonPackage: PythonPackage, - labels: number[], - getValue: Function, - title: string, - xAxisLabel: string, -): ReactElement { +interface CustomLineChartProps { + usages: UsageCountStore; + pythonPackage: PythonPackage; + labels: number[]; + getValue: Function; + title: string; + xAxisLabel: string; +} + +export const CustomLineChart: React.FC = function ({ + usages, + pythonPackage, + labels, + getValue, + title, + xAxisLabel, +}) { + const gridColor = useColorModeValue('#BBB', '#555'); + const textColor = useColorModeValue('#000', '#FFF'); + const options = { responsive: true, plugins: { @@ -78,6 +119,7 @@ export const createLineChart = function ( title: { display: true, text: title, + color: textColor }, }, scales: { @@ -85,6 +127,21 @@ export const createLineChart = function ( title: { display: true, text: xAxisLabel, + color: textColor, + }, + grid: { + color: gridColor, + }, + ticks: { + color: textColor, + }, + }, + y: { + grid: { + color: gridColor, + }, + ticks: { + color: textColor, }, }, }, diff --git a/api-editor/gui/src/features/statistics/ProgressStatistics.tsx b/api-editor/gui/src/features/statistics/ProgressStatistics.tsx index c55df53a1..f7d65230d 100644 --- a/api-editor/gui/src/features/statistics/ProgressStatistics.tsx +++ b/api-editor/gui/src/features/statistics/ProgressStatistics.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, Heading, HStack } from '@chakra-ui/react'; +import { Box, Heading, HStack, useColorModeValue } from '@chakra-ui/react'; import { useAppSelector } from '../../app/hooks'; import { selectMatchedNodes } from '../packageData/apiSlice'; import { selectAllAnnotationsOnTargets, selectAnnotationStore } from '../annotations/annotationSlice'; @@ -10,6 +10,14 @@ import { ArcElement, Chart as ChartJS, Title, Tooltip } from 'chart.js'; ChartJS.register(ArcElement, Title, Tooltip); export const ProgressStatistics = function () { + const completeOrCorrectBg = useColorModeValue('#38a169', '#68d391'); + const completeOrCorrectBorder = useColorModeValue('#2f855a', '#99e6b3'); + + const uncheckedBg = useColorModeValue('#CCC', '#888'); + const uncheckedBorder = useColorModeValue('#AAA', '#AAA'); + + const textColor = useColorModeValue('#000', '#FFF'); + // Completion Progress const completed = useAppSelector(selectAnnotationStore).completes; const matchedNodes = useAppSelector(selectMatchedNodes); @@ -17,12 +25,12 @@ export const ProgressStatistics = function () { const numberOfCompleteMatchedNodes = matchedNodes.filter((it) => it.id in completed).length; const completionData = { - labels: ['Complete', 'Incomplete?'], + labels: ['Complete', 'Unchecked'], datasets: [ { data: [numberOfCompleteMatchedNodes, numberOfMatchedNodes - numberOfCompleteMatchedNodes], - backgroundColor: ['rgba(164,255,99,0.2)', 'rgba(162,162,162,0.2)'], - borderColor: ['rgba(92,154,45,0.2)', 'rgba(115,115,115,0.2)'], + backgroundColor: [completeOrCorrectBg, uncheckedBg], + borderColor: [completeOrCorrectBorder, uncheckedBorder], borderWidth: 1, }, ], @@ -33,6 +41,7 @@ export const ProgressStatistics = function () { title: { display: true, text: 'Completion Progress', + color: textColor, }, }, }; @@ -43,12 +52,12 @@ export const ProgressStatistics = function () { const numberOfReviewedAnnotations = allAnnotations.filter((it) => (it.reviewers?.length ?? 0) > 0).length; const correctnessData = { - labels: ['Correct', 'Incorrect?'], + labels: ['Correct', 'Unchecked'], datasets: [ { data: [numberOfReviewedAnnotations, numberOfAnnotations - numberOfReviewedAnnotations], - backgroundColor: ['rgba(164,255,99,0.2)', 'rgba(162,162,162,0.2)'], - borderColor: ['rgba(92,154,45,0.2)', 'rgba(115,115,115,0.2)'], + backgroundColor: [completeOrCorrectBg, uncheckedBg], + borderColor: [completeOrCorrectBorder, uncheckedBorder], borderWidth: 1, }, ], @@ -59,6 +68,7 @@ export const ProgressStatistics = function () { title: { display: true, text: 'Review Progress', + color: textColor, }, }, }; diff --git a/api-editor/gui/src/features/statistics/QualityStatistics.tsx b/api-editor/gui/src/features/statistics/QualityStatistics.tsx new file mode 100644 index 000000000..0cd9e481c --- /dev/null +++ b/api-editor/gui/src/features/statistics/QualityStatistics.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { Box, Heading, HStack, SimpleGrid } from '@chakra-ui/react'; +import { useAppSelector } from '../../app/hooks'; +import { selectMatchedNodes } from '../packageData/apiSlice'; +import { Annotation, selectAllAnnotationsOnTargets, selectAnnotationStore } from '../annotations/annotationSlice'; +import { Pie } from 'react-chartjs-2'; + +import { ArcElement, Chart as ChartJS, Title, Tooltip } from 'chart.js'; + +ChartJS.register(ArcElement, Title, Tooltip); + +export const QualityStatistics = function () { + const annotationStore = useAppSelector(selectAnnotationStore); + + const boundaryAnnotations = Object.values(annotationStore.boundaries); + const constantAnnotations = Object.values(annotationStore.constants); + const enumAnnotations = Object.values(annotationStore.enums); + const optionalAnnotations = Object.values(annotationStore.optionals); + const removeAnnotations = Object.values(annotationStore.removes); + const requiredAnnotations = Object.values(annotationStore.requireds); + + // Review Progress + // const numberOfAnnotations = allAnnotations.length; + // const numberOfReviewedAnnotations = allAnnotations.filter((it) => (it.reviewers?.length ?? 0) > 0).length; + // + // const correctnessData = { + // labels: ['Correct', 'Incorrect?'], + // datasets: [ + // { + // data: [numberOfReviewedAnnotations, numberOfAnnotations - numberOfReviewedAnnotations], + // backgroundColor: ['rgba(164,255,99,1)', 'rgba(162,162,162,1)'], + // borderColor: ['rgba(92,154,45,1)', 'rgba(115,115,115,1)'], + // borderWidth: 1, + // }, + // ], + // }; + // + // const correctnessOptions = { + // plugins: { + // title: { + // display: true, + // text: 'Review Progress', + // }, + // }, + // }; + + return ( + <> + + Quality of Autogenerated Annotations + + + + {/**/} + {/* */} + {/**/} + {/**/} + {/* */} + {/**/} + {/**/} + {/* */} + {/**/} + {/**/} + {/* */} + {/**/} + {/**/} + {/* */} + {/**/} + {/**/} + {/* */} + {/**/} + + + + ); +}; diff --git a/api-editor/gui/src/features/statistics/StatisticsView.tsx b/api-editor/gui/src/features/statistics/StatisticsView.tsx index fe6848850..b9062d09c 100644 --- a/api-editor/gui/src/features/statistics/StatisticsView.tsx +++ b/api-editor/gui/src/features/statistics/StatisticsView.tsx @@ -5,6 +5,7 @@ import { ApiSizeStatistics } from './ApiSizeStatistics'; import { ApiSizeVsUsefulnessStatistics } from './ApiSizeVsUsefulnessStatistics'; import { ProgressStatistics } from './ProgressStatistics'; import { AchievementDisplay } from '../achievements/AchievementDisplay'; +import { QualityStatistics } from './QualityStatistics'; export const StatisticsView: React.FC = function () { return ( @@ -13,6 +14,7 @@ export const StatisticsView: React.FC = function () { + ); diff --git a/api-editor/gui/src/theme/index.d.ts b/api-editor/gui/src/theme/index.d.ts index 63979c0fb..7c024c6d1 100644 --- a/api-editor/gui/src/theme/index.d.ts +++ b/api-editor/gui/src/theme/index.d.ts @@ -1,8 +1,11 @@ // regenerate by running // npx @chakra-ui/cli tokens path/to/your/theme.(js|ts) export interface ThemeTypings { - borders: 'none' | '1px' | '2px' | '4px' | '8px'; - breakpoints: 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; + blur: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | (string & {}); + borders: 'none' | '1px' | '2px' | '4px' | '8px' | (string & {}); + borderStyles: string & {}; + borderWidths: string & {}; + breakpoints: 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'fullHD' | 'wqhd' | '4kuhd' | (string & {}); colors: | 'transparent' | 'current' @@ -187,7 +190,12 @@ export interface ThemeTypings { | 'telegram.600' | 'telegram.700' | 'telegram.800' - | 'telegram.900'; + | 'telegram.900' + | 'chakra-body-text' + | 'chakra-body-bg' + | 'chakra-border-color' + | 'chakra-placeholder-color' + | (string & {}); colorSchemes: | 'whiteAlpha' | 'blackAlpha' @@ -206,8 +214,9 @@ export interface ThemeTypings { | 'messenger' | 'whatsapp' | 'twitter' - | 'telegram'; - fonts: 'heading' | 'body' | 'mono'; + | 'telegram' + | (string & {}); + fonts: 'heading' | 'body' | 'mono' | (string & {}); fontSizes: | 'xs' | 'sm' @@ -221,7 +230,8 @@ export interface ThemeTypings { | '6xl' | '7xl' | '8xl' - | '9xl'; + | '9xl' + | (string & {}); fontWeights: | 'hairline' | 'thin' @@ -231,15 +241,10 @@ export interface ThemeTypings { | 'semibold' | 'bold' | 'extrabold' - | 'black'; - layerStyles: 'subtleBorder'; - letterSpacings: - | 'tighter' - | 'tight' - | 'normal' - | 'wide' - | 'wider' - | 'widest'; + | 'black' + | (string & {}); + layerStyles: 'subtleBorder' | (string & {}); + letterSpacings: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | (string & {}); lineHeights: | '3' | '4' @@ -255,8 +260,9 @@ export interface ThemeTypings { | 'short' | 'base' | 'tall' - | 'taller'; - radii: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'; + | 'taller' + | (string & {}); + radii: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | (string & {}); shadows: | 'xs' | 'sm' @@ -268,7 +274,8 @@ export interface ThemeTypings { | 'outline' | 'inner' | 'none' - | 'dark-lg'; + | 'dark-lg' + | (string & {}); sizes: | '1' | '2' @@ -323,7 +330,8 @@ export interface ThemeTypings { | 'container.sm' | 'container.md' | 'container.lg' - | 'container.xl'; + | 'container.xl' + | (string & {}); space: | '1' | '-1' @@ -390,9 +398,26 @@ export interface ThemeTypings { | '2.5' | '-2.5' | '3.5' - | '-3.5'; - textStyles: never; - transition: never; + | '-3.5' + | (string & {}); + textStyles: string & {}; + transition: + | 'property.common' + | 'property.colors' + | 'property.dimensions' + | 'property.position' + | 'property.background' + | 'easing.ease-in' + | 'easing.ease-out' + | 'easing.ease-in-out' + | 'duration.ultra-fast' + | 'duration.faster' + | 'duration.fast' + | 'duration.normal' + | 'duration.slow' + | 'duration.slower' + | 'duration.ultra-slow' + | (string & {}); zIndices: | 'hide' | 'auto' @@ -406,184 +431,175 @@ export interface ThemeTypings { | 'popover' | 'skipLink' | 'toast' - | 'tooltip'; + | 'tooltip' + | (string & {}); components: { Accordion: { - sizes: never; - variants: never; + sizes: string & {}; + variants: string & {}; }; Alert: { - sizes: never; - variants: 'subtle' | 'left-accent' | 'top-accent' | 'solid'; + sizes: string & {}; + variants: 'subtle' | 'left-accent' | 'top-accent' | 'solid' | (string & {}); }; Avatar: { - sizes: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'; - variants: never; + sizes: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | (string & {}); + variants: string & {}; }; Badge: { - sizes: never; - variants: 'solid' | 'subtle' | 'outline'; + sizes: string & {}; + variants: 'solid' | 'subtle' | 'outline' | (string & {}); }; Breadcrumb: { - sizes: never; - variants: never; + sizes: string & {}; + variants: string & {}; }; Button: { - sizes: 'lg' | 'md' | 'sm' | 'xs'; - variants: 'ghost' | 'outline' | 'solid' | 'link' | 'unstyled'; + sizes: 'lg' | 'md' | 'sm' | 'xs' | (string & {}); + variants: 'ghost' | 'outline' | 'solid' | 'link' | 'unstyled' | (string & {}); }; Checkbox: { - sizes: 'sm' | 'md' | 'lg'; - variants: never; + sizes: 'sm' | 'md' | 'lg' | (string & {}); + variants: string & {}; }; CloseButton: { - sizes: 'lg' | 'md' | 'sm'; - variants: never; + sizes: 'lg' | 'md' | 'sm' | (string & {}); + variants: string & {}; }; Code: { - sizes: never; - variants: 'solid' | 'subtle' | 'outline'; + sizes: string & {}; + variants: 'solid' | 'subtle' | 'outline' | (string & {}); }; Container: { - sizes: never; - variants: never; + sizes: string & {}; + variants: string & {}; }; Divider: { - sizes: never; - variants: 'solid' | 'dashed'; + sizes: string & {}; + variants: 'solid' | 'dashed' | (string & {}); }; Drawer: { - sizes: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'; - variants: never; + sizes: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | (string & {}); + variants: string & {}; }; Editable: { - sizes: never; - variants: never; + sizes: string & {}; + variants: string & {}; }; Form: { - sizes: never; - variants: never; + sizes: string & {}; + variants: string & {}; + }; + FormError: { + sizes: string & {}; + variants: string & {}; }; FormLabel: { - sizes: never; - variants: never; + sizes: string & {}; + variants: string & {}; }; Heading: { - sizes: '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'; - variants: never; + sizes: '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | (string & {}); + variants: string & {}; }; Input: { - sizes: 'lg' | 'md' | 'sm' | 'xs'; - variants: 'outline' | 'filled' | 'flushed' | 'unstyled'; + sizes: 'lg' | 'md' | 'sm' | 'xs' | (string & {}); + variants: 'outline' | 'filled' | 'flushed' | 'unstyled' | (string & {}); }; Kbd: { - sizes: never; - variants: never; + sizes: string & {}; + variants: string & {}; }; Link: { - sizes: never; - variants: never; + sizes: string & {}; + variants: string & {}; }; List: { - sizes: never; - variants: never; + sizes: string & {}; + variants: string & {}; }; Menu: { - sizes: never; - variants: never; + sizes: string & {}; + variants: string & {}; }; Modal: { - sizes: - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | '2xl' - | '3xl' - | '4xl' - | '5xl' - | '6xl' - | 'full'; - variants: never; + sizes: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full' | (string & {}); + variants: string & {}; }; NumberInput: { - sizes: 'xs' | 'sm' | 'md' | 'lg'; - variants: 'outline' | 'filled' | 'flushed' | 'unstyled'; + sizes: 'xs' | 'sm' | 'md' | 'lg' | (string & {}); + variants: 'outline' | 'filled' | 'flushed' | 'unstyled' | (string & {}); }; PinInput: { - sizes: 'lg' | 'md' | 'sm' | 'xs'; - variants: 'outline' | 'flushed' | 'filled' | 'unstyled'; + sizes: 'lg' | 'md' | 'sm' | 'xs' | (string & {}); + variants: 'outline' | 'flushed' | 'filled' | 'unstyled' | (string & {}); }; Popover: { - sizes: never; - variants: never; + sizes: string & {}; + variants: string & {}; }; Progress: { - sizes: 'xs' | 'sm' | 'md' | 'lg'; - variants: never; + sizes: 'xs' | 'sm' | 'md' | 'lg' | (string & {}); + variants: string & {}; }; Radio: { - sizes: 'md' | 'lg' | 'sm'; - variants: never; + sizes: 'md' | 'lg' | 'sm' | (string & {}); + variants: string & {}; }; Select: { - sizes: 'lg' | 'md' | 'sm' | 'xs'; - variants: 'outline' | 'filled' | 'flushed' | 'unstyled'; + sizes: 'lg' | 'md' | 'sm' | 'xs' | (string & {}); + variants: 'outline' | 'filled' | 'flushed' | 'unstyled' | (string & {}); }; Skeleton: { - sizes: never; - variants: never; + sizes: string & {}; + variants: string & {}; }; SkipLink: { - sizes: never; - variants: never; + sizes: string & {}; + variants: string & {}; }; Slider: { - sizes: 'lg' | 'md' | 'sm'; - variants: never; + sizes: 'lg' | 'md' | 'sm' | (string & {}); + variants: string & {}; }; Spinner: { - sizes: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; - variants: never; + sizes: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string & {}); + variants: string & {}; }; Stat: { - sizes: 'md'; - variants: never; + sizes: 'md' | (string & {}); + variants: string & {}; }; Switch: { - sizes: 'sm' | 'md' | 'lg'; - variants: never; + sizes: 'sm' | 'md' | 'lg' | (string & {}); + variants: string & {}; }; Table: { - sizes: 'sm' | 'md' | 'lg'; - variants: 'simple' | 'striped' | 'unstyled'; + sizes: 'sm' | 'md' | 'lg' | (string & {}); + variants: 'simple' | 'striped' | 'unstyled' | (string & {}); }; Tabs: { - sizes: 'sm' | 'md' | 'lg'; + sizes: 'sm' | 'md' | 'lg' | (string & {}); variants: | 'line' | 'enclosed' | 'enclosed-colored' | 'soft-rounded' | 'solid-rounded' - | 'unstyled'; + | 'unstyled' + | (string & {}); }; Tag: { - sizes: 'sm' | 'md' | 'lg'; - variants: 'subtle' | 'solid' | 'outline'; + sizes: 'sm' | 'md' | 'lg' | (string & {}); + variants: 'subtle' | 'solid' | 'outline' | (string & {}); }; Textarea: { - sizes: 'xs' | 'sm' | 'md' | 'lg'; - variants: 'outline' | 'flushed' | 'filled' | 'unstyled'; + sizes: 'xs' | 'sm' | 'md' | 'lg' | (string & {}); + variants: 'outline' | 'flushed' | 'filled' | 'unstyled' | (string & {}); }; Tooltip: { - sizes: never; - variants: never; - }; - FormError: { - sizes: never; - variants: never; + sizes: string & {}; + variants: string & {}; }; }; } From 4225865204aafd29d939e16fa4aec0e729571f57 Mon Sep 17 00:00:00 2001 From: Lars Reimann Date: Mon, 27 Jun 2022 17:00:13 +0200 Subject: [PATCH 2/5] feat(gui): quality view for annotations --- .../features/statistics/QualityStatistics.tsx | 134 +++++++++++------- 1 file changed, 81 insertions(+), 53 deletions(-) diff --git a/api-editor/gui/src/features/statistics/QualityStatistics.tsx b/api-editor/gui/src/features/statistics/QualityStatistics.tsx index 0cd9e481c..bf9b4879e 100644 --- a/api-editor/gui/src/features/statistics/QualityStatistics.tsx +++ b/api-editor/gui/src/features/statistics/QualityStatistics.tsx @@ -1,8 +1,7 @@ import React from 'react'; -import { Box, Heading, HStack, SimpleGrid } from '@chakra-ui/react'; +import { Box, Heading, SimpleGrid, useColorModeValue } from '@chakra-ui/react'; import { useAppSelector } from '../../app/hooks'; -import { selectMatchedNodes } from '../packageData/apiSlice'; -import { Annotation, selectAllAnnotationsOnTargets, selectAnnotationStore } from '../annotations/annotationSlice'; +import { Annotation, selectAnnotationStore } from '../annotations/annotationSlice'; import { Pie } from 'react-chartjs-2'; import { ArcElement, Chart as ChartJS, Title, Tooltip } from 'chart.js'; @@ -12,38 +11,6 @@ ChartJS.register(ArcElement, Title, Tooltip); export const QualityStatistics = function () { const annotationStore = useAppSelector(selectAnnotationStore); - const boundaryAnnotations = Object.values(annotationStore.boundaries); - const constantAnnotations = Object.values(annotationStore.constants); - const enumAnnotations = Object.values(annotationStore.enums); - const optionalAnnotations = Object.values(annotationStore.optionals); - const removeAnnotations = Object.values(annotationStore.removes); - const requiredAnnotations = Object.values(annotationStore.requireds); - - // Review Progress - // const numberOfAnnotations = allAnnotations.length; - // const numberOfReviewedAnnotations = allAnnotations.filter((it) => (it.reviewers?.length ?? 0) > 0).length; - // - // const correctnessData = { - // labels: ['Correct', 'Incorrect?'], - // datasets: [ - // { - // data: [numberOfReviewedAnnotations, numberOfAnnotations - numberOfReviewedAnnotations], - // backgroundColor: ['rgba(164,255,99,1)', 'rgba(162,162,162,1)'], - // borderColor: ['rgba(92,154,45,1)', 'rgba(115,115,115,1)'], - // borderWidth: 1, - // }, - // ], - // }; - // - // const correctnessOptions = { - // plugins: { - // title: { - // display: true, - // text: 'Review Progress', - // }, - // }, - // }; - return ( <> @@ -51,26 +18,87 @@ export const QualityStatistics = function () { - {/**/} - {/* */} - {/**/} - {/**/} - {/* */} - {/**/} - {/**/} - {/* */} - {/**/} - {/**/} - {/* */} - {/**/} - {/**/} - {/* */} - {/**/} - {/**/} - {/* */} - {/**/} + + + + + + ); }; + +interface QualityPieChartProps { + annotationType: string; + annotations: Annotation[]; +} + +const QualityPieChart: React.FC = function ({ annotationType, annotations }) { + const correctBg = useColorModeValue('#38a169', '#68d391'); + const correctBorder = useColorModeValue('#2f855a', '#99e6b3'); + + const changedBg = useColorModeValue('#a19038', '#d3ba68'); + const changedBorder = useColorModeValue('#857a2f', '#e6d799'); + + const removedBg = useColorModeValue('#a13838', '#d36868'); + const removedBorder = useColorModeValue('#852f2f', '#e69999'); + + const uncheckedBg = useColorModeValue('#CCC', '#888'); + const uncheckedBorder = useColorModeValue('#AAA', '#AAA'); + + const textColor = useColorModeValue('#000', '#FFF'); + + const autogeneratedAnnotations = annotations.filter((it) => (it.authors ?? []).includes('$autogen$')); + const numberOfCorrectAnnotations = autogeneratedAnnotations.filter( + (it) => !it.isRemoved && (it.reviewers ?? []).length > 0 && (it.authors ?? []).length <= 1, + ).length; + const numberOfChangedAnnotations = autogeneratedAnnotations.filter( + (it) => !it.isRemoved && (it.reviewers ?? []).length > 0 && (it.authors ?? []).length > 1, + ).length; + const numberOfRemovedAnnotations = autogeneratedAnnotations.filter((it) => it.isRemoved).length; + const numberOfUncheckedAnnotations = autogeneratedAnnotations.filter( + (it) => !it.isRemoved && (it.reviewers ?? [])?.length === 0, + ).length; + + const data = { + labels: ['Correct', 'Changed', 'Removed', 'Unchecked'], + datasets: [ + { + data: [numberOfCorrectAnnotations, numberOfChangedAnnotations, numberOfRemovedAnnotations, numberOfUncheckedAnnotations], + backgroundColor: [correctBg, changedBg, removedBg, uncheckedBg], + borderColor: [correctBorder, changedBorder, removedBorder, uncheckedBorder], + borderWidth: 1, + }, + ], + }; + + const options = { + plugins: { + title: { + display: true, + text: annotationType, + color: textColor, + }, + }, + }; + + return ( + + + + ); +}; From 88376bf133dd2cb31f9930a0f19548333a62faae Mon Sep 17 00:00:00 2001 From: Lars Reimann Date: Mon, 27 Jun 2022 17:03:53 +0200 Subject: [PATCH 3/5] feat(gui): treat changed annotations still as autogenerated --- api-editor/gui/src/features/annotations/annotationSlice.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/api-editor/gui/src/features/annotations/annotationSlice.ts b/api-editor/gui/src/features/annotations/annotationSlice.ts index 6e2236bff..052429f3d 100644 --- a/api-editor/gui/src/features/annotations/annotationSlice.ts +++ b/api-editor/gui/src/features/annotations/annotationSlice.ts @@ -977,7 +977,7 @@ const removeAnnotation = (state: AnnotationSlice, parent: { [key: string]: Annot const isAutogenerated = (annotation: Annotation) => { const authors = annotation.authors ?? []; - return authors.length === 1 && authors[0] === '$autogen$'; + return authors.includes('$autogen$'); }; const updateQueue = function (state: AnnotationSlice) { From 4bed2588ef003523ba7eb35bc54e78ff7ec54af7 Mon Sep 17 00:00:00 2001 From: Lars Reimann Date: Mon, 27 Jun 2022 17:09:25 +0200 Subject: [PATCH 4/5] style: fix lint error --- api-editor/gui/package.json | 2 +- api-editor/gui/src/theme/index.d.ts | 605 ---------------------------- 2 files changed, 1 insertion(+), 606 deletions(-) delete mode 100644 api-editor/gui/src/theme/index.d.ts diff --git a/api-editor/gui/package.json b/api-editor/gui/package.json index 7dac6ad59..28a1c16fd 100644 --- a/api-editor/gui/package.json +++ b/api-editor/gui/package.json @@ -8,7 +8,7 @@ "serve": "vite preview", "test": "jest src", "test-with-coverage": "jest src --coverage", - "gen:theme-typings": "chakra-cli tokens src/theme/index.ts --out src/theme/index.d.ts", + "gen:theme-typings": "chakra-cli tokens src/theme/index.ts", "postinstall": "npm run gen:theme-typings" }, "prettier": "@lars-reimann/prettier-config", diff --git a/api-editor/gui/src/theme/index.d.ts b/api-editor/gui/src/theme/index.d.ts deleted file mode 100644 index 7c024c6d1..000000000 --- a/api-editor/gui/src/theme/index.d.ts +++ /dev/null @@ -1,605 +0,0 @@ -// regenerate by running -// npx @chakra-ui/cli tokens path/to/your/theme.(js|ts) -export interface ThemeTypings { - blur: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | (string & {}); - borders: 'none' | '1px' | '2px' | '4px' | '8px' | (string & {}); - borderStyles: string & {}; - borderWidths: string & {}; - breakpoints: 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'fullHD' | 'wqhd' | '4kuhd' | (string & {}); - colors: - | 'transparent' - | 'current' - | 'black' - | 'white' - | 'whiteAlpha.50' - | 'whiteAlpha.100' - | 'whiteAlpha.200' - | 'whiteAlpha.300' - | 'whiteAlpha.400' - | 'whiteAlpha.500' - | 'whiteAlpha.600' - | 'whiteAlpha.700' - | 'whiteAlpha.800' - | 'whiteAlpha.900' - | 'blackAlpha.50' - | 'blackAlpha.100' - | 'blackAlpha.200' - | 'blackAlpha.300' - | 'blackAlpha.400' - | 'blackAlpha.500' - | 'blackAlpha.600' - | 'blackAlpha.700' - | 'blackAlpha.800' - | 'blackAlpha.900' - | 'gray.50' - | 'gray.100' - | 'gray.200' - | 'gray.300' - | 'gray.400' - | 'gray.500' - | 'gray.600' - | 'gray.700' - | 'gray.800' - | 'gray.900' - | 'red.50' - | 'red.100' - | 'red.200' - | 'red.300' - | 'red.400' - | 'red.500' - | 'red.600' - | 'red.700' - | 'red.800' - | 'red.900' - | 'orange.50' - | 'orange.100' - | 'orange.200' - | 'orange.300' - | 'orange.400' - | 'orange.500' - | 'orange.600' - | 'orange.700' - | 'orange.800' - | 'orange.900' - | 'yellow.50' - | 'yellow.100' - | 'yellow.200' - | 'yellow.300' - | 'yellow.400' - | 'yellow.500' - | 'yellow.600' - | 'yellow.700' - | 'yellow.800' - | 'yellow.900' - | 'green.50' - | 'green.100' - | 'green.200' - | 'green.300' - | 'green.400' - | 'green.500' - | 'green.600' - | 'green.700' - | 'green.800' - | 'green.900' - | 'teal.50' - | 'teal.100' - | 'teal.200' - | 'teal.300' - | 'teal.400' - | 'teal.500' - | 'teal.600' - | 'teal.700' - | 'teal.800' - | 'teal.900' - | 'blue.50' - | 'blue.100' - | 'blue.200' - | 'blue.300' - | 'blue.400' - | 'blue.500' - | 'blue.600' - | 'blue.700' - | 'blue.800' - | 'blue.900' - | 'cyan.50' - | 'cyan.100' - | 'cyan.200' - | 'cyan.300' - | 'cyan.400' - | 'cyan.500' - | 'cyan.600' - | 'cyan.700' - | 'cyan.800' - | 'cyan.900' - | 'purple.50' - | 'purple.100' - | 'purple.200' - | 'purple.300' - | 'purple.400' - | 'purple.500' - | 'purple.600' - | 'purple.700' - | 'purple.800' - | 'purple.900' - | 'pink.50' - | 'pink.100' - | 'pink.200' - | 'pink.300' - | 'pink.400' - | 'pink.500' - | 'pink.600' - | 'pink.700' - | 'pink.800' - | 'pink.900' - | 'linkedin.50' - | 'linkedin.100' - | 'linkedin.200' - | 'linkedin.300' - | 'linkedin.400' - | 'linkedin.500' - | 'linkedin.600' - | 'linkedin.700' - | 'linkedin.800' - | 'linkedin.900' - | 'facebook.50' - | 'facebook.100' - | 'facebook.200' - | 'facebook.300' - | 'facebook.400' - | 'facebook.500' - | 'facebook.600' - | 'facebook.700' - | 'facebook.800' - | 'facebook.900' - | 'messenger.50' - | 'messenger.100' - | 'messenger.200' - | 'messenger.300' - | 'messenger.400' - | 'messenger.500' - | 'messenger.600' - | 'messenger.700' - | 'messenger.800' - | 'messenger.900' - | 'whatsapp.50' - | 'whatsapp.100' - | 'whatsapp.200' - | 'whatsapp.300' - | 'whatsapp.400' - | 'whatsapp.500' - | 'whatsapp.600' - | 'whatsapp.700' - | 'whatsapp.800' - | 'whatsapp.900' - | 'twitter.50' - | 'twitter.100' - | 'twitter.200' - | 'twitter.300' - | 'twitter.400' - | 'twitter.500' - | 'twitter.600' - | 'twitter.700' - | 'twitter.800' - | 'twitter.900' - | 'telegram.50' - | 'telegram.100' - | 'telegram.200' - | 'telegram.300' - | 'telegram.400' - | 'telegram.500' - | 'telegram.600' - | 'telegram.700' - | 'telegram.800' - | 'telegram.900' - | 'chakra-body-text' - | 'chakra-body-bg' - | 'chakra-border-color' - | 'chakra-placeholder-color' - | (string & {}); - colorSchemes: - | 'whiteAlpha' - | 'blackAlpha' - | 'gray' - | 'red' - | 'orange' - | 'yellow' - | 'green' - | 'teal' - | 'blue' - | 'cyan' - | 'purple' - | 'pink' - | 'linkedin' - | 'facebook' - | 'messenger' - | 'whatsapp' - | 'twitter' - | 'telegram' - | (string & {}); - fonts: 'heading' | 'body' | 'mono' | (string & {}); - fontSizes: - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | '2xl' - | '3xl' - | '4xl' - | '5xl' - | '6xl' - | '7xl' - | '8xl' - | '9xl' - | (string & {}); - fontWeights: - | 'hairline' - | 'thin' - | 'light' - | 'normal' - | 'medium' - | 'semibold' - | 'bold' - | 'extrabold' - | 'black' - | (string & {}); - layerStyles: 'subtleBorder' | (string & {}); - letterSpacings: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest' | (string & {}); - lineHeights: - | '3' - | '4' - | '5' - | '6' - | '7' - | '8' - | '9' - | '10' - | 'normal' - | 'none' - | 'shorter' - | 'short' - | 'base' - | 'tall' - | 'taller' - | (string & {}); - radii: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | (string & {}); - shadows: - | 'xs' - | 'sm' - | 'base' - | 'md' - | 'lg' - | 'xl' - | '2xl' - | 'outline' - | 'inner' - | 'none' - | 'dark-lg' - | (string & {}); - sizes: - | '1' - | '2' - | '3' - | '4' - | '5' - | '6' - | '7' - | '8' - | '9' - | '10' - | '12' - | '14' - | '16' - | '20' - | '24' - | '28' - | '32' - | '36' - | '40' - | '44' - | '48' - | '52' - | '56' - | '60' - | '64' - | '72' - | '80' - | '96' - | 'px' - | '0.5' - | '1.5' - | '2.5' - | '3.5' - | 'max' - | 'min' - | 'full' - | '3xs' - | '2xs' - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | '2xl' - | '3xl' - | '4xl' - | '5xl' - | '6xl' - | '7xl' - | '8xl' - | 'container.sm' - | 'container.md' - | 'container.lg' - | 'container.xl' - | (string & {}); - space: - | '1' - | '-1' - | '2' - | '-2' - | '3' - | '-3' - | '4' - | '-4' - | '5' - | '-5' - | '6' - | '-6' - | '7' - | '-7' - | '8' - | '-8' - | '9' - | '-9' - | '10' - | '-10' - | '12' - | '-12' - | '14' - | '-14' - | '16' - | '-16' - | '20' - | '-20' - | '24' - | '-24' - | '28' - | '-28' - | '32' - | '-32' - | '36' - | '-36' - | '40' - | '-40' - | '44' - | '-44' - | '48' - | '-48' - | '52' - | '-52' - | '56' - | '-56' - | '60' - | '-60' - | '64' - | '-64' - | '72' - | '-72' - | '80' - | '-80' - | '96' - | '-96' - | 'px' - | '-px' - | '0.5' - | '-0.5' - | '1.5' - | '-1.5' - | '2.5' - | '-2.5' - | '3.5' - | '-3.5' - | (string & {}); - textStyles: string & {}; - transition: - | 'property.common' - | 'property.colors' - | 'property.dimensions' - | 'property.position' - | 'property.background' - | 'easing.ease-in' - | 'easing.ease-out' - | 'easing.ease-in-out' - | 'duration.ultra-fast' - | 'duration.faster' - | 'duration.fast' - | 'duration.normal' - | 'duration.slow' - | 'duration.slower' - | 'duration.ultra-slow' - | (string & {}); - zIndices: - | 'hide' - | 'auto' - | 'base' - | 'docked' - | 'dropdown' - | 'sticky' - | 'banner' - | 'overlay' - | 'modal' - | 'popover' - | 'skipLink' - | 'toast' - | 'tooltip' - | (string & {}); - components: { - Accordion: { - sizes: string & {}; - variants: string & {}; - }; - Alert: { - sizes: string & {}; - variants: 'subtle' | 'left-accent' | 'top-accent' | 'solid' | (string & {}); - }; - Avatar: { - sizes: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | (string & {}); - variants: string & {}; - }; - Badge: { - sizes: string & {}; - variants: 'solid' | 'subtle' | 'outline' | (string & {}); - }; - Breadcrumb: { - sizes: string & {}; - variants: string & {}; - }; - Button: { - sizes: 'lg' | 'md' | 'sm' | 'xs' | (string & {}); - variants: 'ghost' | 'outline' | 'solid' | 'link' | 'unstyled' | (string & {}); - }; - Checkbox: { - sizes: 'sm' | 'md' | 'lg' | (string & {}); - variants: string & {}; - }; - CloseButton: { - sizes: 'lg' | 'md' | 'sm' | (string & {}); - variants: string & {}; - }; - Code: { - sizes: string & {}; - variants: 'solid' | 'subtle' | 'outline' | (string & {}); - }; - Container: { - sizes: string & {}; - variants: string & {}; - }; - Divider: { - sizes: string & {}; - variants: 'solid' | 'dashed' | (string & {}); - }; - Drawer: { - sizes: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | (string & {}); - variants: string & {}; - }; - Editable: { - sizes: string & {}; - variants: string & {}; - }; - Form: { - sizes: string & {}; - variants: string & {}; - }; - FormError: { - sizes: string & {}; - variants: string & {}; - }; - FormLabel: { - sizes: string & {}; - variants: string & {}; - }; - Heading: { - sizes: '4xl' | '3xl' | '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | (string & {}); - variants: string & {}; - }; - Input: { - sizes: 'lg' | 'md' | 'sm' | 'xs' | (string & {}); - variants: 'outline' | 'filled' | 'flushed' | 'unstyled' | (string & {}); - }; - Kbd: { - sizes: string & {}; - variants: string & {}; - }; - Link: { - sizes: string & {}; - variants: string & {}; - }; - List: { - sizes: string & {}; - variants: string & {}; - }; - Menu: { - sizes: string & {}; - variants: string & {}; - }; - Modal: { - sizes: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full' | (string & {}); - variants: string & {}; - }; - NumberInput: { - sizes: 'xs' | 'sm' | 'md' | 'lg' | (string & {}); - variants: 'outline' | 'filled' | 'flushed' | 'unstyled' | (string & {}); - }; - PinInput: { - sizes: 'lg' | 'md' | 'sm' | 'xs' | (string & {}); - variants: 'outline' | 'flushed' | 'filled' | 'unstyled' | (string & {}); - }; - Popover: { - sizes: string & {}; - variants: string & {}; - }; - Progress: { - sizes: 'xs' | 'sm' | 'md' | 'lg' | (string & {}); - variants: string & {}; - }; - Radio: { - sizes: 'md' | 'lg' | 'sm' | (string & {}); - variants: string & {}; - }; - Select: { - sizes: 'lg' | 'md' | 'sm' | 'xs' | (string & {}); - variants: 'outline' | 'filled' | 'flushed' | 'unstyled' | (string & {}); - }; - Skeleton: { - sizes: string & {}; - variants: string & {}; - }; - SkipLink: { - sizes: string & {}; - variants: string & {}; - }; - Slider: { - sizes: 'lg' | 'md' | 'sm' | (string & {}); - variants: string & {}; - }; - Spinner: { - sizes: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string & {}); - variants: string & {}; - }; - Stat: { - sizes: 'md' | (string & {}); - variants: string & {}; - }; - Switch: { - sizes: 'sm' | 'md' | 'lg' | (string & {}); - variants: string & {}; - }; - Table: { - sizes: 'sm' | 'md' | 'lg' | (string & {}); - variants: 'simple' | 'striped' | 'unstyled' | (string & {}); - }; - Tabs: { - sizes: 'sm' | 'md' | 'lg' | (string & {}); - variants: - | 'line' - | 'enclosed' - | 'enclosed-colored' - | 'soft-rounded' - | 'solid-rounded' - | 'unstyled' - | (string & {}); - }; - Tag: { - sizes: 'sm' | 'md' | 'lg' | (string & {}); - variants: 'subtle' | 'solid' | 'outline' | (string & {}); - }; - Textarea: { - sizes: 'xs' | 'sm' | 'md' | 'lg' | (string & {}); - variants: 'outline' | 'flushed' | 'filled' | 'unstyled' | (string & {}); - }; - Tooltip: { - sizes: string & {}; - variants: string & {}; - }; - }; -} From ef458109b1016c17e7c71f0668356531a5f9e47d Mon Sep 17 00:00:00 2001 From: lars-reimann Date: Mon, 27 Jun 2022 15:13:02 +0000 Subject: [PATCH 5/5] style: apply automatic fixes of linters --- .../features/packageData/selectionView/ParameterView.tsx | 4 ++-- api-editor/gui/src/features/statistics/ChartWrappers.tsx | 2 +- .../gui/src/features/statistics/QualityStatistics.tsx | 7 ++++++- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/api-editor/gui/src/features/packageData/selectionView/ParameterView.tsx b/api-editor/gui/src/features/packageData/selectionView/ParameterView.tsx index ed1e2586f..156fddf31 100644 --- a/api-editor/gui/src/features/packageData/selectionView/ParameterView.tsx +++ b/api-editor/gui/src/features/packageData/selectionView/ParameterView.tsx @@ -96,7 +96,7 @@ const CustomBarChart: React.FC = function ({ parameterUsage }, ticks: { color: textColor, - } + }, }, y: { grid: { @@ -104,7 +104,7 @@ const CustomBarChart: React.FC = function ({ parameterUsage }, ticks: { color: textColor, - } + }, }, }, }; diff --git a/api-editor/gui/src/features/statistics/ChartWrappers.tsx b/api-editor/gui/src/features/statistics/ChartWrappers.tsx index f806ad804..8bda3601d 100644 --- a/api-editor/gui/src/features/statistics/ChartWrappers.tsx +++ b/api-editor/gui/src/features/statistics/ChartWrappers.tsx @@ -119,7 +119,7 @@ export const CustomLineChart: React.FC = function ({ title: { display: true, text: title, - color: textColor + color: textColor, }, }, scales: { diff --git a/api-editor/gui/src/features/statistics/QualityStatistics.tsx b/api-editor/gui/src/features/statistics/QualityStatistics.tsx index bf9b4879e..1e684f742 100644 --- a/api-editor/gui/src/features/statistics/QualityStatistics.tsx +++ b/api-editor/gui/src/features/statistics/QualityStatistics.tsx @@ -78,7 +78,12 @@ const QualityPieChart: React.FC = function ({ annotationTy labels: ['Correct', 'Changed', 'Removed', 'Unchecked'], datasets: [ { - data: [numberOfCorrectAnnotations, numberOfChangedAnnotations, numberOfRemovedAnnotations, numberOfUncheckedAnnotations], + data: [ + numberOfCorrectAnnotations, + numberOfChangedAnnotations, + numberOfRemovedAnnotations, + numberOfUncheckedAnnotations, + ], backgroundColor: [correctBg, changedBg, removedBg, uncheckedBg], borderColor: [correctBorder, changedBorder, removedBorder, uncheckedBorder], borderWidth: 1,