or run

npx @tessl/cli init
Log in

Version

Files

docs

chart-components.mdchart-plugins.mddata-transformation.mdform-data.mdindex.mdquery-building.md

evals

scenario-1

rubric.jsontask.md

scenario-10

rubric.jsontask.md

scenario-2

rubric.jsontask.md

scenario-3

rubric.jsontask.md

scenario-4

rubric.jsontask.md

scenario-5

rubric.jsontask.md

scenario-6

rubric.jsontask.md

scenario-7

rubric.jsontask.md

scenario-8

rubric.jsontask.md

scenario-9

rubric.jsontask.md
tile.json

task.mdevals/scenario-6/

Sales Performance Dashboard

Build an interactive sales performance visualization dashboard that displays sales data over time using multiple chart types. The dashboard should allow users to switch between different visualization modes and customize the appearance of the charts.

Requirements

Create a TypeScript application that:

  1. Registers Multiple Chart Types: Set up chart plugins for at least three different visualization types suitable for time series data (line, area, bar, or scatter charts).

  2. Implements Chart Rendering: Render a sales performance chart that displays monthly sales data with the following features:

    • Display sales amount over time (monthly data points)
    • Support switching between different chart types dynamically
    • Include a legend showing the data series

  3. Configures Chart Appearance: Customize the chart with:

    • A custom color scheme
    • Smooth lines or curves for line-based charts
    • Configurable axis labels (X-axis: "Month", Y-axis: "Sales ($)")
    • Enable zoom functionality for detailed exploration

  4. Handles Data Transformation: Process the raw sales data into the format required by the chart plugins, ensuring proper time series formatting and value scaling.

Dependencies { .dependencies }

@superset-ui/plugin-chart-echarts { .dependency }

Provides comprehensive ECharts visualization plugins for Apache Superset including time series charts.

Test Cases

Test 1: Chart Plugin Registration { .test }

File: src/chartRegistry.test.ts

Test that chart plugins are properly registered and can be retrieved from the registry.

import { getChartPlugin } from './chartRegistry';

describe('Chart Plugin Registration', () => {
  test('should register line chart plugin', () => {
    const plugin = getChartPlugin('line');
    expect(plugin).toBeDefined();
    expect(plugin.metadata.name).toContain('Line');
  });

  test('should register area chart plugin', () => {
    const plugin = getChartPlugin('area');
    expect(plugin).toBeDefined();
    expect(plugin.metadata.name).toContain('Area');
  });

  test('should register bar chart plugin', () => {
    const plugin = getChartPlugin('bar');
    expect(plugin).toBeDefined();
    expect(plugin.metadata.name).toContain('Bar');
  });
});

Test 2: Data Transformation { .test }

File: src/dataTransform.test.ts

Test that sales data is correctly transformed into the chart data format.

import { transformSalesData } from './dataTransform';

describe('Data Transformation', () => {
  test('should transform sales data to chart format', () => {
    const salesData = [
      { month: '2024-01', sales: 50000 },
      { month: '2024-02', sales: 62000 },
      { month: '2024-03', sales: 58000 }
    ];

    const transformed = transformSalesData(salesData);

    expect(transformed).toHaveProperty('data');
    expect(transformed.data).toHaveLength(3);
    expect(transformed.data[0]).toHaveProperty('month');
    expect(transformed.data[0]).toHaveProperty('sales');
  });
});

Test 3: Chart Configuration { .test }

File: src/chartConfig.test.ts

Test that chart configuration is properly applied with custom settings.

import { createChartConfig } from './chartConfig';

describe('Chart Configuration', () => {
  test('should create config with axis labels', () => {
    const config = createChartConfig('line', {
      xAxisTitle: 'Month',
      yAxisTitle: 'Sales ($)'
    });

    expect(config.xAxisTitle).toBe('Month');
    expect(config.yAxisTitle).toBe('Sales ($)');
  });

  test('should enable zoom functionality', () => {
    const config = createChartConfig('line', { zoomable: true });

    expect(config.zoomable).toBe(true);
  });

  test('should apply custom color scheme', () => {
    const config = createChartConfig('line', { colorScheme: 'supersetColors' });

    expect(config.colorScheme).toBeDefined();
  });
});