use styled components

packages/ava-react/package.json

@@ -1,15 +1,15 @@
 {
-  "name": "@antv/ava-react",
-  "version": "3.3.2",
+  "name": "@formant/ava-react",
+  "version": "3.3.24-formant",
   "description": "React components of AVA.",
   "author": {
-    "name": "AntV",
+    "name": "formant",
     "url": "https://antv.antgroup.com/"
   },
   "homepage": "https://ava.antv.antgroup.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/antvis/AVA/tree/master/packages/ava-react"
+    "url": "https://github.com/FormantIO/AVA/tree/master/packages/ava-react"
   },
   "keywords": [
     "visualization",
@@ -42,7 +42,8 @@
     "build": "father build",
     "test": "jest",
     "coverage": "jest --coverage",
-    "watch": "yarn module && yarn build --w"
+    "watch": "yarn module && yarn build --w",
+    "dev": "vite"
   },
   "sideEffects": false,
   "lint-staged": {
@@ -52,12 +53,13 @@
     ]
   },
   "dependencies": {
-    "@antv/ava": "^3.4.0",
     "@antv/g2": "^5.0.8",
+    "@formant/ava": "3.4.16-formant",
     "canvg": "^4.0.1",
     "classnames": "^2.3.2",
     "katex": "^0.16.4",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.484.0",
     "styled-components": "^5.3.5",
     "uuid": "^8.3.2"
   },
@@ -70,6 +72,7 @@
     "@types/react-dom": "^17.0.9",
     "@types/styled-components": "^5.1.25",
     "@types/uuid": "^8.3.1",
+    "@vitejs/plugin-react": "^4.2.1",
     "antd": "^4.16.13",
     "eslint": "^7.32.0",
     "father": "^4.1.0",
@@ -80,7 +83,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "typescript": "^4.9.3"
+    "typescript": "^4.9.3",
+    "vite": "^5.1.0"
   },
   "peerDependencies": {
     "@ant-design/icons": ">=4.7.0",

packages/ava-react/src/InsightCard/InsightCard.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react'
 import { Empty, message, Row, Spin } from 'antd';
 import cx from 'classnames';
 import { isFunction } from 'lodash';
-import { getInsights } from '@antv/ava';
+import { getInsights } from '@formant/ava';
 
 import { copyToClipboard, NarrativeTextVis, NtvPluginManager, TextExporter } from '../NarrativeTextVis';
 
@@ -15,7 +15,7 @@ import { EXPORT_DATA_LABEL, INSIGHT_CARD_PREFIX_CLS } from './constants';
 import { Container } from './styled/container';
 import { defaultMoreButton } from './Toolbar/defaultTools';
 
-import type { InsightInfo } from '@antv/ava';
+import type { InsightInfo } from '@formant/ava';
 import type { Tool } from './Toolbar/types';
 import type { InsightCardProps, InsightCardInfo, InsightDataStatus } from './types';
 
@@ -39,7 +39,7 @@ export const InsightCard: React.FC<InsightCardProps> = ({
   const [dataStatus, setDataStatus] = useState<InsightDataStatus>('SUCCESS');
   const [errorMessage, setErrorMessage] = useState<string>('');
   const pluginManager = useRef<NtvPluginManager>(new NtvPluginManager([...insightCardPresetPlugins, ...extraPlugins]));
-  const { measures = [], dimensions = [], patterns = [] } = currentInsightInfo || {};
+  const { measures = [], dimensions = [], patterns = [], subspace = [], data = [] } = currentInsightInfo || {};
   const ref = useRef<HTMLDivElement>(null);
 
   const calculateAndSetInsightPatterns = useCallback(() => {
@@ -139,8 +139,8 @@ export const InsightCard: React.FC<InsightCardProps> = ({
   };
 
   return (
-    <Container className={cx(className, prefixCls)} style={styles} ref={ref}>
-      <Title title={title} measures={measures} dimensions={dimensions} patterns={patterns} headerTools={headerTools} />
+    <Container className={cx(className, prefixCls)} style={{ ...styles, backgroundColor: '#2d3855' }} ref={ref}>
+      <Title title={title} measures={measures} dimensions={dimensions} patterns={patterns} subspace={subspace} headerTools={headerTools} />
       {/* content */}
       <Spin spinning={dataStatus === 'RUNNING'}>
         {dataStatus === 'SUCCESS' && !!contentSpec ? (

packages/ava-react/src/InsightCard/Title/customStyled.tsx

@@ -0,0 +1,131 @@
+import styled from "styled-components";
+import { AlertCircle, Info } from "lucide-react";
+
+const Card = styled.div`
+  background-color: 282f45;
+  border-radius: 8px;
+`
+
+const CardHeader = styled.div`
+  padding: 0.5rem 0.5rem  0.25rem;
+  white-space:nowrap;
+`
+
+const HeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+const TitleContainer = styled.div``
+
+const CardTitle = styled.h2`
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #bac4e2;
+  margin: 0;
+  display: flex;
+  align-items: center;
+`
+
+const CardDescription = styled.p`
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  color: #bac4e2;
+`
+
+const Badge = styled.span`
+  display: inline-flex;
+  align-items: center;
+  background-color: #ef4444;
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+`
+
+const CardContent = styled.div`
+  padding: 0 1.25rem 1.25rem;
+`
+
+const Alert = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  border-radius: 6px;
+  padding: 0.75rem;
+  margin-bottom: 1rem;
+`
+
+const AlertTitleRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+`
+
+const AlertTitle = styled.h3`
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin: 0;
+  color: #bac4e2;
+`
+
+const AlertDescription = styled.p`
+  font-size: 0.75rem;
+  margin: 0;
+  padding-left: 1.25rem;
+
+`
+
+const Highlight = styled.span`
+  font-weight: 600;
+`
+
+const TooltipContainer = styled.div`
+  position: relative;
+  display: inline-block;
+`
+
+const TooltipIcon = styled(Info)`
+  width: 1.25rem;
+  height: 1.25rem;
+  color: #64748b;
+  cursor: help;
+`
+
+const TooltipContent = styled.div`
+  position: absolute;
+  top: 100%;
+  right: 0;
+  width: 200px;
+  padding: 0.5rem;
+  background-color: #1e293b;
+  color: white;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  z-index: 10;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s, visibility 0.2s;
+
+  ${TooltipContainer}:hover & {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -6px;
+    right: 10px;
+    border-width: 0 6px 6px 6px;
+    border-style: solid;
+    border-color: transparent transparent #1e293b transparent;
+  }
+`
+export { Card, CardHeader, HeaderContainer, TitleContainer, CardTitle, CardDescription, Badge, CardContent, Alert, AlertTitleRow, AlertTitle, AlertDescription, Highlight, TooltipContainer, TooltipIcon, TooltipContent };

packages/ava-react/src/InsightCard/Title/index.tsx

@@ -1,33 +1,49 @@
 import React from 'react';
 
-import cx from 'classnames';
-import { isFunction, uniq } from 'lodash';
+import {  uniq } from 'lodash';
 
 import { Toolbar } from '../Toolbar';
 import { ALGORITHM_NAME_MAP, ALGORITHM_NAME_MAP_ZH, INSIGHT_CARD_PREFIX_CLS } from '../constants';
-import { MeasureName, Tag as StyledTag } from '../styled/tag';
 
 import type { InsightCardProps, InsightCardInfo } from '../types';
+import { Badge, Card, CardDescription, CardHeader, CardTitle, Highlight, HeaderContainer, TitleContainer, TooltipContainer, TooltipContent, TooltipIcon } from './customStyled';
 
-export type TitleProps = Pick<InsightCardProps, 'headerTools' | 'title' | 'visualizationOptions'> &
-  Pick<InsightCardInfo, 'measures' | 'dimensions' | 'patterns'>;
-export const Title: React.FC<TitleProps> = ({ title, patterns, measures, headerTools, visualizationOptions }) => {
+export type TitleProps = Pick<InsightCardProps, 'headerTools' | 'title' | 'visualizationOptions' |  'period'  > &
+  Pick<InsightCardInfo, 'measures' | 'dimensions' | 'patterns' | 'subspace'>;
+export const Title: React.FC<TitleProps> = ({ title, patterns, measures, headerTools, visualizationOptions, dimensions, period, subspace }) => {
   const prefixCls = INSIGHT_CARD_PREFIX_CLS;
   const insightTypes = uniq(patterns?.map((pattern) => pattern.type) ?? []);
   const measureNames = uniq(measures?.map((measure) => measure.fieldName)).join(',');
   const algorithmNameMap = visualizationOptions?.lang === 'zh-CN' ? ALGORITHM_NAME_MAP_ZH : ALGORITHM_NAME_MAP;
-  const analysisName = insightTypes.map((algorithm) => algorithmNameMap[algorithm]).join(',') ?? '';
-  const defaultTitle = (
-    <div>
-      <MeasureName className={`${prefixCls}-measure-name`}>{measureNames}</MeasureName>
-      <StyledTag className={cx(`${prefixCls}-analysis-tag`)}>{analysisName}</StyledTag>
-    </div>
-  );
-  const customTitle = title && isFunction(title) ? title(defaultTitle) : title;
+  const capitalize = s => s && String(s[0]).toUpperCase() + String(s).slice(1);
+  const analysisName = insightTypes.map((algorithm) => capitalize(algorithmNameMap[algorithm])).join(',') ?? '';
+
+  const newTitle  = ( <Card>
+    <CardHeader>
+      <HeaderContainer>
+        <TitleContainer>
+          <CardTitle>
+            {title ? `${title}- ${measureNames}`: {measureNames}}
+            <Badge> {analysisName}</Badge>
+          </CardTitle>
+          <CardDescription> 
+           {subspace && subspace.length > 0 && subspace.map(_ => <><Highlight> {_.dimension}: </Highlight> <Highlight> {_.value} </Highlight></> )}   
+          </CardDescription>
+        </TitleContainer>
+        <TooltipContainer>
+          <TooltipIcon />
+          <TooltipContent>
+            <p>This chart displays that {analysisName} was detected.</p>
+          </TooltipContent>
+        </TooltipContainer>
+      </HeaderContainer>
+    </CardHeader>
+      </Card>
+  )
 
   return (
     <div className={`${prefixCls}-title`}>
-      {customTitle ?? defaultTitle}
+      {newTitle}
       {!!headerTools?.length && (
         <div className={`${prefixCls}-title-tools`}>
           <Toolbar tools={headerTools} />

packages/ava-react/src/InsightCard/constants.tsx

@@ -1,4 +1,4 @@
-import { InsightType } from '@antv/ava';
+import { InsightType } from '@formant/ava';
 
 import { getPrefixCls } from '../utils';
 /** class name prefix for InsightCard, avar-insight-card */

packages/ava-react/src/InsightCard/ntvPlugins/components/G2Chart.tsx

@@ -16,14 +16,14 @@ export const G2Chart = ({ spec, height, width }: { spec: G2Spec; height?: number
         autoFit: true,
         padding: 'auto',
       });
-      chartRef.current.options(spec);
+      chartRef.current.options({ ...spec, theme: 'classicDark' });
     } else {
       chartRef.current.clear();
       chartRef.current.options({
         autoFit: true,
         padding: 'auto',
       });
-      chartRef.current.options(spec);
+      chartRef.current.options({ ...spec, theme: 'classicDark' });
     }
 
     if (!isRendering.current) {

packages/ava-react/src/InsightCard/ntvPlugins/plugins/subspaceDescriptionPlugin.tsx

@@ -5,19 +5,8 @@ import { createCustomPhraseFactory } from "../../../NarrativeTextVis";
 import { SUBSPACE_DESCRIPTION_PLUGIN_KEY } from "../../constants";
 
 export const SubspaceDescription = ({ subspaceDescription }: { subspaceDescription: string }) => {
-  return (
-    <Typography.Text
-      ellipsis={{ tooltip: subspaceDescription }}
-      style={{
-        display: 'block',
-        color: 'rgba(0, 0, 0, 0.3)',
-        backgroundColor: 'rgba(0, 0, 0, 0.02)',
-        marginTop: '10px'
-      }}
-    >
-      {subspaceDescription}
-    </Typography.Text>
-  );
+  return (<></>)
+
 };
 
 export const subspaceDescriptionPlugin = createCustomPhraseFactory({

packages/ava-react/src/InsightCard/ntvPlugins/types.ts

@@ -1,5 +1,5 @@
 import type { G2Spec } from '@antv/g2';
-import type { CustomBlockElement } from '@antv/ava';
+import type { CustomBlockElement } from '@formant/ava';
 
 export type ChartsSchema = CustomBlockElement & {
   chartSpecs: G2Spec[];

packages/ava-react/src/InsightCard/styled/container.tsx

@@ -4,9 +4,9 @@ export const Container = styled.div`
   margin-bottom: 8px;
   padding: 8px;
   font-size: 12px;
-  font-family: roboto-regular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB',
+  font-family: Moderat, roboto-regular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB',
     'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  background-color: #fff;
+  background-color: rgb(45, 56, 85);
   border-radius: 2px;
-  border: 1px solid #e8e8e8;
+  border: 1px solid rgb(30, 41, 59);
 `;

packages/ava-react/src/InsightCard/styled/tag.tsx

@@ -4,19 +4,19 @@ export const Tag = styled.span`
   display: inline-block;
   margin-right: 4px;
   padding: 3px;
-  color: #250462;
+  color: #0a0b10;
   font-weight: 400;
   font-size: 12px;
   line-height: 12px;
-  background-color: rgba(37, 4, 98, 0.08);
+  background-color: #f89973;
   border-radius: 2px;
 `;
 
 export const MeasureName = styled.span`
   display: inline-block;
   height: 20px;
   margin-right: 4px;
-  color: rgba(0, 0, 0, 0.88);
+  color: #18d2ff;
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;