feat(block-kit): add data visualization block example

block-kit/README.md

@@ -11,6 +11,7 @@ Read the [docs](https://docs.slack.dev/block-kit/) to learn concepts behind thes
 - **[Actions](https://docs.slack.dev/reference/block-kit/blocks/actions-block)**: Holds multiple interactive elements. [Implementation](./src/blocks/actions.js).
 - **[Context](https://docs.slack.dev/reference/block-kit/blocks/context-block)**: Provides contextual info, which can include both images and text. [Implementation](./src/blocks/context.js).
 - **[Context actions](https://docs.slack.dev/reference/block-kit/blocks/context-actions-block)**: Displays actions as contextual info, which can include both feedback buttons and icon buttons. [Implementation](./src/blocks/context_actions.js).
+- **[Data visualization](https://docs.slack.dev/reference/block-kit/blocks/data-visualization-block)**: Displays a chart that visualizes a set of data. [Implementation](./src/blocks/data_visualization.js).
 - **[Divider](https://docs.slack.dev/reference/block-kit/blocks/divider-block)**: Visually separates pieces of info inside of a message. [Implementation](./src/blocks/divider.js).
 - **[File](https://docs.slack.dev/reference/block-kit/blocks/file-block)**: Displays info about remote files. [Implementation](./src/blocks/file.js).
 - **[Header](https://docs.slack.dev/reference/block-kit/blocks/header-block)**: Displays a larger-sized text. [Implementation](./src/blocks/header.js).

block-kit/src/blocks/data_visualization.js

@@ -0,0 +1,169 @@
+/**
+ * Displays a chart that visualizes a set of data.
+ *
+ * The `data_visualization` block is net-new and depends on the
+ * `DataVisualizationBlock` type shipping from `@slack/types`. The import below
+ * is written as if that type is already published; once the SDK release lands,
+ * these examples type-check without any local changes.
+ *
+ * @see {@link https://docs.slack.dev/reference/block-kit/blocks/data-visualization-block/}
+ */
+
+/**
+ * A pie chart that visualizes how segments contribute to a whole.
+ *
+ * @returns {import('@slack/types').DataVisualizationBlock}
+ */
+export function example01() {
+  /**
+   * @type {import('@slack/types').DataVisualizationBlock}
+   */
+  const block = {
+    type: "data_visualization",
+    title: "My Favorite Candy Bars",
+    chart: {
+      type: "pie",
+      segments: [
+        { label: "Kit Kat", value: 45 },
+        { label: "Twix", value: 28 },
+        { label: "Crunch", value: 18 },
+        { label: "Milky Way", value: 9 },
+      ],
+    },
+  };
+  return block;
+}
+
+/**
+ * A bar chart that compares values across categories.
+ *
+ * @returns {import('@slack/types').DataVisualizationBlock}
+ */
+export function example02() {
+  /**
+   * @type {import('@slack/types').DataVisualizationBlock}
+   */
+  const block = {
+    type: "data_visualization",
+    title: "My Favorite Pies by Percentage of Tastiness",
+    chart: {
+      type: "bar",
+      series: [
+        {
+          name: "Pies",
+          data: [
+            { label: "Strawberry Rhubarb", value: 85 },
+            { label: "Pumpkin", value: 70 },
+            { label: "Lemon Meringue", value: 72 },
+            { label: "Blueberry", value: 90 },
+            { label: "Key Lime", value: 56 },
+          ],
+        },
+      ],
+      axis_config: {
+        categories: [
+          "Strawberry Rhubarb",
+          "Pumpkin",
+          "Lemon Meringue",
+          "Blueberry",
+          "Key Lime",
+        ],
+        x_label: "Pies",
+        y_label: "Percentage of Tastiness",
+      },
+    },
+  };
+  return block;
+}
+
+/**
+ * An area chart that visualizes multiple series over time.
+ *
+ * @returns {import('@slack/types').DataVisualizationBlock}
+ */
+export function example03() {
+  /**
+   * @type {import('@slack/types').DataVisualizationBlock}
+   */
+  const block = {
+    type: "data_visualization",
+    title: "Daily Active Users",
+    chart: {
+      type: "area",
+      series: [
+        {
+          name: "Pied Piper Free Tier",
+          data: [
+            { label: "Mon", value: 12000 },
+            { label: "Tues", value: 13500 },
+            { label: "Wed", value: 15200 },
+            { label: "Thurs", value: 14800 },
+            { label: "Fri", value: 16400 },
+          ],
+        },
+        {
+          name: "Pied Piper Paid Tier",
+          data: [
+            { label: "Mon", value: 4500 },
+            { label: "Tues", value: 4800 },
+            { label: "Wed", value: 5100 },
+            { label: "Thurs", value: 5600 },
+            { label: "Fri", value: 6200 },
+          ],
+        },
+      ],
+      axis_config: {
+        categories: ["Mon", "Tues", "Wed", "Thur", "Fri"],
+        x_label: "Day",
+        y_label: "Users",
+      },
+    },
+  };
+  return block;
+}
+
+/**
+ * A line chart that compares trends across multiple series.
+ *
+ * @returns {import('@slack/types').DataVisualizationBlock}
+ */
+export function example04() {
+  /**
+   * @type {import('@slack/types').DataVisualizationBlock}
+   */
+  const block = {
+    type: "data_visualization",
+    title: "Weekly Paper Sales",
+    chart: {
+      type: "line",
+      series: [
+        {
+          name: "Dunder Mifflin Infinity Website",
+          data: [
+            { label: "Week 1", value: 32000 },
+            { label: "Week 2", value: 35000 },
+            { label: "Week 3", value: 29000 },
+            { label: "Week 4", value: 41000 },
+            { label: "Week 5", value: 45000 },
+          ],
+        },
+        {
+          name: "Dunder Mifflin In-store",
+          data: [
+            { label: "Week 1", value: 32000 },
+            { label: "Week 2", value: 35000 },
+            { label: "Week 3", value: 29000 },
+            { label: "Week 4", value: 41000 },
+            { label: "Week 5", value: 45000 },
+          ],
+        },
+      ],
+      axis_config: {
+        categories: ["Week 1", "Week 2", "Week 3", "Week 4", "Week 5"],
+        x_label: "Week",
+        y_label: "Paper Sales (USD)",
+      },
+    },
+  };
+  return block;
+}

block-kit/tests/blocks/data_visualization.test.js

@@ -0,0 +1,141 @@
+import * as assert from "node:assert";
+import { describe, it } from "node:test";
+import {
+  example01,
+  example02,
+  example03,
+  example04,
+} from "../../src/blocks/data_visualization.js";
+
+describe("data_visualization", () => {
+  it("example01", () => {
+    const block = example01();
+    const expected = {
+      type: "data_visualization",
+      title: "My Favorite Candy Bars",
+      chart: {
+        type: "pie",
+        segments: [
+          { label: "Kit Kat", value: 45 },
+          { label: "Twix", value: 28 },
+          { label: "Crunch", value: 18 },
+          { label: "Milky Way", value: 9 },
+        ],
+      },
+    };
+    assert.deepStrictEqual(block, expected);
+  });
+
+  it("example02", () => {
+    const block = example02();
+    const expected = {
+      type: "data_visualization",
+      title: "My Favorite Pies by Percentage of Tastiness",
+      chart: {
+        type: "bar",
+        series: [
+          {
+            name: "Pies",
+            data: [
+              { label: "Strawberry Rhubarb", value: 85 },
+              { label: "Pumpkin", value: 70 },
+              { label: "Lemon Meringue", value: 72 },
+              { label: "Blueberry", value: 90 },
+              { label: "Key Lime", value: 56 },
+            ],
+          },
+        ],
+        axis_config: {
+          categories: [
+            "Strawberry Rhubarb",
+            "Pumpkin",
+            "Lemon Meringue",
+            "Blueberry",
+            "Key Lime",
+          ],
+          x_label: "Pies",
+          y_label: "Percentage of Tastiness",
+        },
+      },
+    };
+    assert.deepStrictEqual(block, expected);
+  });
+
+  it("example03", () => {
+    const block = example03();
+    const expected = {
+      type: "data_visualization",
+      title: "Daily Active Users",
+      chart: {
+        type: "area",
+        series: [
+          {
+            name: "Pied Piper Free Tier",
+            data: [
+              { label: "Mon", value: 12000 },
+              { label: "Tues", value: 13500 },
+              { label: "Wed", value: 15200 },
+              { label: "Thurs", value: 14800 },
+              { label: "Fri", value: 16400 },
+            ],
+          },
+          {
+            name: "Pied Piper Paid Tier",
+            data: [
+              { label: "Mon", value: 4500 },
+              { label: "Tues", value: 4800 },
+              { label: "Wed", value: 5100 },
+              { label: "Thurs", value: 5600 },
+              { label: "Fri", value: 6200 },
+            ],
+          },
+        ],
+        axis_config: {
+          categories: ["Mon", "Tues", "Wed", "Thur", "Fri"],
+          x_label: "Day",
+          y_label: "Users",
+        },
+      },
+    };
+    assert.deepStrictEqual(block, expected);
+  });
+
+  it("example04", () => {
+    const block = example04();
+    const expected = {
+      type: "data_visualization",
+      title: "Weekly Paper Sales",
+      chart: {
+        type: "line",
+        series: [
+          {
+            name: "Dunder Mifflin Infinity Website",
+            data: [
+              { label: "Week 1", value: 32000 },
+              { label: "Week 2", value: 35000 },
+              { label: "Week 3", value: 29000 },
+              { label: "Week 4", value: 41000 },
+              { label: "Week 5", value: 45000 },
+            ],
+          },
+          {
+            name: "Dunder Mifflin In-store",
+            data: [
+              { label: "Week 1", value: 32000 },
+              { label: "Week 2", value: 35000 },
+              { label: "Week 3", value: 29000 },
+              { label: "Week 4", value: 41000 },
+              { label: "Week 5", value: 45000 },
+            ],
+          },
+        ],
+        axis_config: {
+          categories: ["Week 1", "Week 2", "Week 3", "Week 4", "Week 5"],
+          x_label: "Week",
+          y_label: "Paper Sales (USD)",
+        },
+      },
+    };
+    assert.deepStrictEqual(block, expected);
+  });
+});