@scality/core-ui 0.115.0

package/stories/vegachart.stories.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { VegaChart } from '../src/lib/components/vegachart/VegaChart.component';
+import { data } from './data/linechart';
+import { Wrapper, Title } from './common';
+const spec = {
+  data: {
+    values: data,
+  },
+  encoding: {
+    x: {
+      field: 'time',
+      type: 'temporal',
+      timeUnit: 'yearmonthdatehoursminutes',
+      title: 'time',
+    },
+    tooltip: [
+      {
+        field: 'time',
+        type: 'temporal',
+        timeUnit: 'yearmonthdatehoursminutes',
+      },
+      {
+        field: 'total_space',
+        type: 'quantitative',
+        title: 'TOTAL SPACE',
+      },
+      {
+        field: 'used_space',
+        type: 'quantitative',
+        title: 'USED SPACE',
+      },
+    ],
+  },
+  layer: [
+    {
+      mark: {
+        type: 'line',
+        color: 'green',
+      },
+      encoding: {
+        y: {
+          field: 'total_space',
+          type: 'quantitative',
+          title: 'TOTAL SPACE (GB)',
+        },
+      },
+    },
+    {
+      mark: {
+        type: 'line',
+        color: 'orange',
+      },
+      encoding: {
+        y: {
+          field: 'used_space',
+          type: 'quantitative',
+          title: 'USED SPACE (GB)',
+        },
+      },
+    },
+    {
+      mark: 'rule',
+      selection: {
+        index: {
+          type: 'single',
+          on: 'mousemove',
+          encodings: ['x'],
+          nearest: true,
+        },
+      },
+      encoding: {
+        color: {
+          condition: {
+            selection: {
+              not: 'index',
+            },
+            value: 'transparent',
+          },
+        },
+      },
+    },
+  ],
+};
+const id = 'vis';
+export default {
+  title: 'Components/Data Display/Charts/VegaChart',
+  component: VegaChart,
+};
+export const Default = {
+  render: (args) => {
+    return (
+      <Wrapper>
+        <Title>Vega-Lite wrapper - need to specify the entire spec</Title>
+        <VegaChart id={id} spec={spec} {...args} />
+      </Wrapper>
+    );
+  },
+};

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "exclude": ["src/**/*.test.*","stories/*", "dist/**/*"],
+  "compilerOptions": {
+    "module": "esnext",
+    "declaration": true, // Generate d.ts files
+    "allowSyntheticDefaultImports": true, // Allow import React from 'react'
+    "jsx": "react-jsx",
+    "target": "es2019",
+    "outDir": "dist",
+    "declarationMap": true, // go to js file when using IDE functions like "Go to Definition" in VSCode
+    "lib": ["ESNext", "dom"],
+    "skipLibCheck": true, // does not check types in node_modules
+    "moduleResolution": "node",
+    "strict": true,
+    "strictFunctionTypes": true,
+    "noImplicitAny": false //For now it is too costly to enable this one
+  }
+}

package/types/styled.d.ts

@@ -0,0 +1,6 @@
+import 'styled-components';
+import { CoreUITheme } from '../src/lib/style/theme';
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends CoreUITheme {}
+}