feat(ava/ntv): add formula phrase

antvis · Apr 20, 2023 · ae6ab06 · ae6ab06
1 parent d2664fb
commit ae6ab06
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 3 deletions.
diff --git a/packages/ava-react/package.json b/packages/ava-react/package.json
@@ -55,13 +55,15 @@
     "@antv/g2": "5.0.0",
     "canvg": "^4.0.1",
     "classnames": "^2.3.2",
+    "katex": "^0.16.4",
     "lodash": "^4.17.21",
     "styled-components": "^5.3.5",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@ant-design/icons": "^4.7.0",
     "@types/jest": "^26.0.24",
+    "@types/katex": "^0.16.0",
     "@types/lodash": "^4.14.180",
     "@types/react": "^17.0.15",
     "@types/react-dom": "^17.0.9",

diff --git a/packages/ava-react/src/NarrativeTextVis/phrases/Phrase.tsx b/packages/ava-react/src/NarrativeTextVis/phrases/Phrase.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 
 import { Tooltip, TooltipProps } from 'antd';
-import { isTextPhrase, isEntityPhrase, isEscapePhrase } from '@antv/ava';
+import { isTextPhrase, isEntityPhrase, isEscapePhrase, isFormulaPhrase } from '@antv/ava';
 import { isFunction, kebabCase, isEmpty, isNil } from 'lodash';
+import katex from 'katex';
 
 import { NTV_PREFIX_CLS } from '../constants';
-import { Entity, Bold, Italic, Underline } from '../styled';
+import { Entity, Bold, Italic, Underline, FormulaWrapper } from '../styled';
 import { functionalize } from '../utils';
 import { classnames as cx } from '../../utils';
 import { PhraseDescriptor, presetPluginManager } from '../chore/plugin';
@@ -148,6 +149,23 @@ export const Phrase: React.FC<PhraseProps> = ({
   // 使用 pre 标签渲染特殊转义字符
   if (isEscapePhrase(phrase)) return <pre>{phrase.value}</pre>;
 
+  // use katex to render formula
+  // 使用 katex 渲染公式
+  if (isFormulaPhrase(phrase))
+    return (
+      <FormulaWrapper
+        className={`${NTV_PREFIX_CLS}-formula`}
+        dangerouslySetInnerHTML={{
+          __html: katex.renderToString(phrase.value, {
+            throwOnError: false,
+            displayMode: true,
+            strict: 'ignore',
+            fleqn: true,
+          }),
+        }}
+      />
+    );
+
   const descriptor = pluginManager?.getPhraseDescriptorBySpec(phrase);
   if (descriptor) {
     return <>{renderPhraseByDescriptor({ spec: phrase, descriptor, themeStyles, events })}</>;

diff --git a/packages/ava-react/src/NarrativeTextVis/styled/index.tsx b/packages/ava-react/src/NarrativeTextVis/styled/index.tsx
@@ -4,3 +4,4 @@ export * from './paragraph';
 export * from './bullet';
 export * from './marks';
 export * from './entity';
+export * from './phrase';
diff --git a/packages/ava-react/src/NarrativeTextVis/styled/phrase.tsx b/packages/ava-react/src/NarrativeTextVis/styled/phrase.tsx
@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const FormulaWrapper = styled.div`
+  display: inline-block;
+`;
diff --git a/packages/ava/src/index.ts b/packages/ava/src/index.ts
@@ -141,6 +141,7 @@ export {
   isTextPhrase,
   isEntityType,
   isEscapePhrase,
+  isFormulaPhrase,
   ENTITY_TYPES,
 } from './ntv';
 export type {
@@ -156,6 +157,7 @@ export type {
   CustomBlockElement,
   PhraseSpec,
   TextPhraseSpec,
+  FormulaPhraseSpec,
   EntityPhraseSpec,
   EscapePhraseSpec,
   CustomPhraseSpec,

diff --git a/packages/ava/src/ntv/schema/phrase.ts b/packages/ava/src/ntv/schema/phrase.ts
@@ -1,7 +1,12 @@
 import { CustomMetaData, CommonProps } from './common';
 
 // P used for custom phrase;
-export type PhraseSpec = TextPhraseSpec | EntityPhraseSpec | EscapePhraseSpec | CustomPhraseSpec<CustomMetaData>;
+export type PhraseSpec =
+  | TextPhraseSpec
+  | EntityPhraseSpec
+  | EscapePhraseSpec
+  | FormulaPhraseSpec
+  | CustomPhraseSpec<CustomMetaData>;
 
 export type TextPhraseSpec = CommonProps & {
   type: 'text';
@@ -20,6 +25,14 @@ export type EscapePhraseSpec = CommonProps & {
   value: string;
 };
 
+/**
+ * math formula
+ */
+export type FormulaPhraseSpec = CommonProps & {
+  type: 'formula';
+  value: string;
+};
+
 export type EntityPhraseSpec = CommonProps & {
   type: 'entity';
   value?: string;

diff --git a/packages/ava/src/ntv/types.ts b/packages/ava/src/ntv/types.ts
@@ -13,6 +13,7 @@ export type {
   TextPhraseSpec,
   EntityPhraseSpec,
   EscapePhraseSpec,
+  FormulaPhraseSpec,
   CustomPhraseSpec,
   ValueAssessment,
   EntityType,

diff --git a/packages/ava/src/ntv/utils/isSpecType.ts b/packages/ava/src/ntv/utils/isSpecType.ts
@@ -14,6 +14,7 @@ import type {
   EntityPhraseSpec,
   TextPhraseSpec,
   EscapePhraseSpec,
+  FormulaPhraseSpec,
 } from '../schema';
 
 export function isCustomSection(spec: SectionSpec): spec is CustomBlockElement {
@@ -71,3 +72,7 @@ export function isTextPhrase(spec: PhraseSpec): spec is TextPhraseSpec {
 export function isEscapePhrase(spec: PhraseSpec): spec is EscapePhraseSpec {
   return spec?.type === 'escape';
 }
+
+export function isFormulaPhrase(spec: PhraseSpec): spec is FormulaPhraseSpec {
+  return spec?.type === 'formula';
+}
diff --git a/playground/package.json b/playground/package.json
@@ -55,6 +55,7 @@
     "antd": "^4.8.0",
     "antv-site-demo-rc": "^1.0.0",
     "csstype": "^3.0.5",
+    "katex": "^0.16.4",
     "lodash": "^4.17.21",
     "numeral": "^2.0.6",
     "react": "^17.0.2",

diff --git a/playground/src/DevPlayground/NTV/index.tsx b/playground/src/DevPlayground/NTV/index.tsx
@@ -369,6 +369,31 @@ const App = () => {
           ],
         }}
       />
+      <Divider>公式</Divider>
+      <NarrativeTextVis
+        spec={{
+          sections: [
+            {
+              paragraphs: [
+                {
+                  type: 'normal',
+                  phrases: [
+                    {
+                      type: 'text',
+                      value: '渲染公式：',
+                    },
+                    {
+                      type: 'formula',
+                      // eslint-disable-next-line no-useless-escape, quotes
+                      value: `c = \\pm\\sqrt{a^2 + b^2}`,
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        }}
+      />
     </>
   );
 };

diff --git a/playground/src/global.css b/playground/src/global.css
@@ -1,2 +1,3 @@
 @import '~antd/dist/antd.css';
 @import '~@antv/auto-chart/esm/index.css';
+@import '~katex/dist/katex.min.css';