feat(theme): add dark and update academy theme (#5584)

* feat(theme): add dark theme * feat(theme): update academy
antvis · Sep 22, 2023 · 051d719 · 051d719
1 parent 7a799ec
commit 051d719
Show file tree

Hide file tree

Showing 18 changed files with 221 additions and 828 deletions.
diff --git a/__tests__/integration/snapshots/static/githubStarIntervalThemeAcademy.png b/__tests__/integration/snapshots/static/githubStarIntervalThemeAcademy.png
diff --git a/__tests__/plots/static/github-star-interval-theme-academy.ts b/__tests__/plots/static/github-star-interval-theme-academy.ts
@@ -4,18 +4,12 @@ import { githubStar } from '../../data/github-star';
 export function githubStarIntervalThemeAcademy(): G2Spec {
   return {
     type: 'interval',
-    data: {
-      value: githubStar,
-      transform: [{ type: 'sortBy', fields: [['star', true]] }],
-    },
-    legend: { color: false },
+    theme: 'academy',
+    data: githubStar,
     encode: {
       x: 'name',
       y: 'star',
       color: 'name',
     },
-    theme: {
-      type: 'academy',
-    },
   };
 }
diff --git a/__tests__/unit/lib/core.spec.ts b/__tests__/unit/lib/core.spec.ts
@@ -51,7 +51,7 @@ import {
   Sequential,
   Constant as ConstantScale,
 } from '../../../src/scale';
-import { Classic, ClassicDark, Academy, Light } from '../../../src/theme';
+import { Classic, ClassicDark, Academy, Light, Dark } from '../../../src/theme';
 import {
   AxisX,
   AxisY,
@@ -254,6 +254,7 @@ describe('corelib', () => {
       'theme.classicDark': ClassicDark,
       'theme.academy': Academy,
       'theme.light': Light,
+      'theme.dark': Dark,
       'component.axisX': AxisX,
       'component.axisY': AxisY,
       'component.legendCategory': LegendCategory,

diff --git a/__tests__/unit/lib/std.spec.ts b/__tests__/unit/lib/std.spec.ts
@@ -60,7 +60,7 @@ import {
   Sequential,
   Constant as ConstantScale,
 } from '../../../src/scale';
-import { Classic, ClassicDark, Academy, Light } from '../../../src/theme';
+import { Classic, ClassicDark, Academy, Light, Dark } from '../../../src/theme';
 import {
   AxisX,
   AxisY,
@@ -280,6 +280,7 @@ describe('stdlib', () => {
       'theme.classicDark': ClassicDark,
       'theme.academy': Academy,
       'theme.light': Light,
+      'theme.dark': Dark,
       'component.axisX': AxisX,
       'component.axisY': AxisY,
       'component.legendCategory': LegendCategory,

diff --git a/site/.dumi/theme/components/ConfigPanel.tsx b/site/.dumi/theme/components/ConfigPanel.tsx
@@ -8,7 +8,7 @@ import './ConfigPanel.less';
 
 const BUILT_THEMES = [
   { label: '默认风格', key: 'light' },
-  { label: '暗色风格', key: 'classicDark' },
+  { label: '暗色风格', key: 'dark' },
   { label: '学术风格', key: 'academy' },
 ];
 

diff --git a/site/.dumi/theme/examples/bar-dodged.ts b/site/.dumi/theme/examples/bar-dodged.ts
@@ -25,6 +25,7 @@ export const BarDodged = ({ container, theme, width, height }) => {
     .encode('x', 'state')
     .encode('y', 'population')
     .encode('color', 'age')
+    .scale('y', { nice: true })
     .axis('y', { labelFormatter: '~s' })
     .interaction('tooltip', { shared: true });
 

diff --git a/site/.dumi/theme/examples/bar-range.ts b/site/.dumi/theme/examples/bar-range.ts
@@ -31,6 +31,7 @@ export const BarRange = ({ container, theme, width, height }) => {
     .encode('color', (d) =>
       d.month === 'Total' ? 'Total' : d.profit > 0 ? 'Increase' : 'Decrease',
     )
+    .scale('y', { nice: true })
     .axis('y', { labelFormatter: '~s' });
 
   chart.render();

diff --git a/site/.dumi/theme/examples/grouped-box.ts b/site/.dumi/theme/examples/grouped-box.ts
@@ -92,6 +92,7 @@ export const groupedBox = ({ container, theme, width, height }) => {
     .scale('x', { paddingInner: 0.2, paddingOuter: 0.1 })
     .scale('y', { zero: true })
     .scale('series', { paddingInner: 0.3, paddingOuter: 0.1 })
+    .scale('y', { nice: true })
     .tooltip([
       { name: 'min', channel: 'y' },
       { name: 'q1', channel: 'y1' },

diff --git a/site/.dumi/theme/examples/line-bar.ts b/site/.dumi/theme/examples/line-bar.ts
@@ -25,7 +25,8 @@ export const lineBar = ({ container, theme, width, height }) => {
     .interval()
     .encode('x', 'time')
     .encode('y', 'waiting')
-    .axis('y', { titleFill: '#5B8FF9', title: 'Waiting' });
+    .axis('y', { titleFill: '#5B8FF9', title: 'Waiting' })
+    .scale('y', { nice: true });
 
   chart
     .line()
@@ -34,7 +35,7 @@ export const lineBar = ({ container, theme, width, height }) => {
     .encode('shape', 'smooth')
     .style('stroke', '#fdae6b')
     .style('lineWidth', 2)
-    .scale('y', { independent: true })
+    .scale('y', { independent: true, nice: true })
     .axis('y', {
       position: 'right',
       grid: null,

diff --git a/site/.dumi/theme/examples/line-connect-nulls.ts b/site/.dumi/theme/examples/line-connect-nulls.ts
@@ -31,6 +31,7 @@ export const lineConnectNulls = ({ container, theme, width, height }) => {
     })
     .encode('x', 'date')
     .encode('y', 'close')
+    .scale('y', { nice: true })
     .style('connectNulls', true);
 
   chart.render();

diff --git a/site/.dumi/theme/examples/missing-data-area.ts b/site/.dumi/theme/examples/missing-data-area.ts
@@ -19,6 +19,7 @@ export const missingDataArea = ({ container, theme, width, height }) => {
     .encode('x', (d) => new Date(d.date))
     // Mock missing data. Set NaN from Jan. to Mar.
     .encode('y', (d) => (new Date(d.date).getUTCMonth() <= 3 ? NaN : d.close))
+    .scale('y', { nice: true })
     .style('connect', true)
     .style('connectFill', 'grey')
     .style('connectFillOpacity', 0.15);

diff --git a/site/.dumi/theme/examples/point-log.ts b/site/.dumi/theme/examples/point-log.ts
@@ -23,6 +23,8 @@ export const pointLog = ({ container, theme, width, height }) => {
     .scale('size', { type: 'log', range: [4, 20] })
     .style('fillOpacity', 0.3)
     .style('lineWidth', 1)
+    .scale('x', { nice: true })
+    .scale('y', { nice: true })
     .legend('size', false)
     .interaction('fisheye', true);
 

diff --git a/src/lib/core.ts b/src/lib/core.ts
@@ -50,7 +50,7 @@ import {
   Sequential as ScaleSequential,
   Constant as ScaleConstant,
 } from '../scale';
-import { Classic, ClassicDark, Academy, Light } from '../theme';
+import { Classic, ClassicDark, Academy, Light, Dark } from '../theme';
 import {
   AxisX,
   AxisY,
@@ -252,6 +252,7 @@ export function corelib() {
     'theme.classicDark': ClassicDark,
     'theme.academy': Academy,
     'theme.light': Light,
+    'theme.dark': Dark,
     'component.axisX': AxisX,
     'component.axisY': AxisY,
     'component.legendCategory': LegendCategory,

diff --git a/src/runtime/plot.ts b/src/runtime/plot.ts
@@ -278,7 +278,12 @@ export async function plot<T extends G2ViewTree>(
     for (const typeOption of inferInteraction(options)) {
       const [type, option] = typeOption;
       if (option) {
-        const interaction = useInteraction({ type, ...(option as any) });
+        const interaction = useThemeInteraction(
+          target.view,
+          type,
+          option as Record<string, any>,
+          useInteraction,
+        );
         const destroy = interaction(
           target,
           enterViewInstances,
@@ -303,7 +308,12 @@ export async function plot<T extends G2ViewTree>(
 
       // Apply new interaction.
       if (option) {
-        const interaction = useInteraction({ type, ...(option as any) });
+        const interaction = useThemeInteraction(
+          target.view,
+          type,
+          option as Record<string, any>,
+          useInteraction,
+        );
         const destroy = interaction(
           target,
           updateViewInstances,
@@ -402,10 +412,12 @@ function updateTooltip(
   if (!tooltipOptions[1]) return;
 
   // Apply new tooltip interaction.
-  const applyTooltip = useInteraction({
-    type: 'tooltip',
-    ...(tooltipOptions[1] as any),
-  });
+  const applyTooltip = useThemeInteraction(
+    view,
+    'tooltip',
+    tooltipOptions[1] as any,
+    useInteraction,
+  );
   const target = {
     options,
     view,
@@ -593,6 +605,20 @@ async function initializeMarks(
   return markState;
 }
 
+function useThemeInteraction(
+  view: G2ViewDescriptor,
+  type: string,
+  option: Record<string, any>,
+  useInteraction: (options: G2InteractionOptions, context?: any) => Interaction,
+): Interaction {
+  const theme = view.theme;
+  const defaults = typeof type === 'string' ? theme[type] || {} : {};
+  const interaction = useInteraction(
+    deepMix(defaults, { type, ...(option as any) }),
+  );
+  return interaction;
+}
+
 function initializeState(
   markState: Map<G2Mark, G2MarkState>,
   options: G2View,