fix(wordCloud): support wordCloud Chart with negative data and one da…

common/changes/@visactor/vgrammar/fix-word-cloud-dev_2023-08-03-11-51.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vgrammar",
+      "comment": "fix(wordCloud): support wordCloud Chart with negative data and one data. fix VisActor/VChart#299, fix VisActor/VChart#373",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vgrammar"
+}

packages/vgrammar-wordcloud/__tests__/wordcloud.test.ts

@@ -77,3 +77,122 @@ test('Wordcloud generates wordcloud layout', async () => {
   expect(result[0].x).toBe(250);
   expect(result[0].y).toBe(250);
 });
+
+test('Wordcloud generates wordcloud layout with negative data', async () => {
+  const data = [
+    { text: 'foo', size: -49, index: 0 },
+    { text: 'bar', size: 36, index: 1 },
+    { text: 'baz', size: 25, index: 2 },
+    { text: 'abc', size: 1, index: 3 }
+  ];
+
+  const result = await transform(
+    {
+      size: [500, 500],
+      text: { field: 'text' },
+      fontSize: { field: 'size' },
+      fontSizeRange: [1, 7]
+    },
+    data
+  );
+  expect(result.length).toBe(data.length);
+  expect(result[0].fontFamily).toBe('sans-serif');
+  expect(result[0].fontSize).toBe(7);
+  expect(result[0].fontStyle).toBe('normal');
+  expect(result[0].fontWeight).toBe('normal');
+  expect(result[0].x).toBe(250);
+  expect(result[0].y).toBe(250);
+});
+
+test('Wordcloud generates wordcloud layout with negative data and -domain[0] === domain[1]', async () => {
+  const data = [
+    { text: 'foo', size: -49, index: 0 },
+    { text: 'bar', size: 49, index: 1 }
+  ];
+
+  const result = await transform(
+    {
+      size: [500, 500],
+      text: { field: 'text' },
+      fontSize: { field: 'size' },
+      fontSizeRange: [1, 7]
+    },
+    data
+  );
+  expect(result.length).toBe(data.length);
+  expect(result[0].fontFamily).toBe('sans-serif');
+  expect(result[0].fontSize).toBe(7);
+  expect(result[0].fontStyle).toBe('normal');
+  expect(result[0].fontWeight).toBe('normal');
+  expect(result[0].x).toBe(250);
+  expect(result[0].y).toBe(250);
+});
+
+test('Wordcloud generates wordcloud layout with one data', async () => {
+  const data = [{ text: 'foo', size: 49, index: 0 }];
+
+  const result = await transform(
+    {
+      size: [500, 500],
+      text: { field: 'text' },
+      fontSize: { field: 'size' },
+      fontSizeRange: [1, 7]
+    },
+    data
+  );
+  expect(result.length).toBe(data.length);
+  expect(result[0].fontFamily).toBe('sans-serif');
+  expect(result[0].fontSize).toBe(7);
+  expect(result[0].fontStyle).toBe('normal');
+  expect(result[0].fontWeight).toBe('normal');
+  expect(result[0].x).toBe(250);
+  expect(result[0].y).toBe(250);
+});
+
+test('Wordcloud generates wordcloud layout with domain[0] == domain[1] & domain[0] < 0', async () => {
+  const data = [
+    { text: 'foo', size: -49, index: 0 },
+    { text: 'bar', size: -49, index: 1 }
+  ];
+
+  const result = await transform(
+    {
+      size: [500, 500],
+      text: { field: 'text' },
+      fontSize: { field: 'size' },
+      fontSizeRange: [1, 7]
+    },
+    data
+  );
+  expect(result.length).toBe(data.length);
+  expect(result[0].fontFamily).toBe('sans-serif');
+  expect(result[0].fontSize).toBe(1);
+  expect(result[0].fontStyle).toBe('normal');
+  expect(result[0].fontWeight).toBe('normal');
+  expect(result[0].x).toBe(250);
+  expect(result[0].y).toBe(250);
+});
+
+test('Wordcloud generates wordcloud layout with domain[0] == domain[1] & domain[0] > 0', async () => {
+  const data = [
+    { text: 'foo', size: 49, index: 0 },
+    { text: 'bar', size: 49, index: 1 }
+  ];
+
+  const result = await transform(
+    {
+      size: [500, 500],
+      text: { field: 'text' },
+      fontSize: { field: 'size' },
+      fontSizeRange: [1, 7]
+    },
+    data
+  );
+  expect(result.length).toBe(data.length);
+  expect(result[0].fontFamily).toBe('sans-serif');
+  expect(result[0].fontSize).toBe(1);
+  expect(result[0].fontStyle).toBe('normal');
+  expect(result[0].fontWeight).toBe('normal');
+  expect(result[0].x).toBe(250);
+  expect(result[0].y).toBe(250);
+});

packages/vgrammar-wordcloud/src/wordcloud.ts

@@ -90,8 +90,9 @@ export const transform = (
   // 只有fontSize不为固定值时，fontSizeRange才生效
   if (fontSizeRange && !isNumber(fontSize)) {
     const fsize: any = fontSize;
-    fontSize = (datum: any) => {
-      return sqrtScale(fsize(datum), extent(fsize, data), fontSizeRange as number[]);
+    fontSize = datum => {
+      const fontSizeSqrtScale = generateSqrtScale(extent(fsize, data), fontSizeRange as number[]);
+      return fontSizeSqrtScale(fsize(datum));
     };
   }
 
@@ -169,13 +170,22 @@ const field = <T>(option: FieldOption | TagItemAttribute<T>) => {
   return (datum: any) => datum[(option as FieldOption).field] as T;
 };
 
-// 模拟sqrt scale
-const sqrtScale = (datum: any, domain: number[], range: number[]) => {
-  return (
-    ((Math.sqrt(datum) - Math.sqrt(domain[0])) / (Math.sqrt(domain[1]) - Math.sqrt(domain[0]))) *
-      (range[1] - range[0]) +
-    range[0]
-  );
+const sqrt = (x: number) => {
+  return x < 0 ? -Math.sqrt(-x) : Math.sqrt(x);
+};
+
+// simulation sqrt scale
+const generateSqrtScale = (domain: number[], range: number[]) => {
+  if (domain[0] === domain[1]) {
+    return (datum: number) => range[0]; // match smallest fontsize
+  }
+
+  const s0 = sqrt(domain[0]);
+  const s1 = sqrt(domain[1]);
+  const min = Math.min(s0, s1);
+  const max = Math.max(s0, s1);
+
+  return (datum: number) => ((sqrt(datum) - min) / (max - min)) * (range[1] - range[0]) + range[0];
 };
 
 const extent = (field: any, data: any[]) => {