function ThemeDemo()

in stories/feat.theme.stories.js [136:253]
116 lines of code
1 McCabe index (conditional complexity)

function ThemeDemo() {
  const theme = select(
    '主题',
    {
      默认: 'normal',
      暗色: 'dark',
      自定义: {
        name: 'customTheme',
        'widgets-container-background': '#f2f3f7',
      },
    },
    themes.name,
  );

  useMemo(() => {
    themes.setTheme(theme);
  }, [theme]);

  return (
    <div>
      <div style={{ display: 'flex' }}>
        <div style={{ flex: '1 1 33.33%' }}>
          <Wplaceholder loading height={200} />
        </div>
        <div style={{ flex: '1 1 33.33%' }}>
          <Wplaceholder noData height={200} language={'en-us'} />
        </div>
        <div style={{ flex: '1 1 33.33%' }}>
          <Wline height="200" data={[]} language={'en-us'} />
        </div>
      </div>
      <div style={{ display: 'flex' }}>
        <div style={{ flex: '1 1 33.33%' }}>
          <Wcontainer className="demos">
            <Wline
              height="300"
              data={data}
              config={{
                area: true,
                colors: ['#00FFFF'],
                areaColors: ['l(90) 0:#000000 1:#00FFFF00'], // 颜色渐变
              }}
            />
          </Wcontainer>
        </div>
        <div style={{ flex: '1 1 33.33%' }}>
          <Wcontainer className="demos">
            <Wbar
              height="300"
              config={{
                xAxis: {
                  type: 'timeCat',
                },
                colors: ['#131313'],
                stack: true,
                label: {
                  position: 'middle',
                },
              }}
              data={data}
            />
          </Wcontainer>
        </div>
        <div style={{ flex: '1 1 33.33%' }}>
          <Wcontainer className="demos">
            <Wlinebar
              height="300"
              data={lineBarData}
              config={{
                label: {
                  position: 'middle',
                },
              }}
            />
          </Wcontainer>
        </div>
      </div>
      <div style={{ display: 'flex' }}>
        <div style={{ flex: '1 1 33.33%' }}>
          <Wpie
            height={200}
            data={[
              {
                name: '浏览器占比',
                data: [
                  ['Firefox', 45.0],
                  ['IE', 26.8],
                  ['Chrome', 12.8],
                  ['Safari', 8.5],
                  ['Opera', 6.2],
                  ['Others', 0.7],
                ],
              },
            ]}
          />
        </div>
        <div style={{ flex: '1 1 33.33%' }}>
          <Wbar
            data={data}
            height={200}
            language={'en-us'}
            config={{
              xAxis: {
                type: 'timeCat',
                autoRotate: true,
                autoHide: false,
                // autoEllipsis: true
              },
            }}
          />
        </div>
        <div style={{ flex: '1 1 33.33%' }}>
          <Wline height="200" data={data} language={'en-us'} />
        </div>
      </div>
    </div>
  );
}