or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-models.mddashboard.mddata-connection.mddata-formatting.mdindex.mdplugin-system.mdtranslation.mdui-styling.mdvalidation-math.md
tile.json

tessl/npm-superset-ui--core

Core utilities and components for Apache Superset's frontend UI framework providing data visualization, formatting, and chart composition capabilities

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@superset-ui/core@0.18.x

To install, run

npx @tessl/cli install tessl/npm-superset-ui--core@0.18.0

index.mddocs/

@superset-ui/core

The @superset-ui/core package provides foundational utilities, types, and components for the Apache Superset UI ecosystem. It serves as the core infrastructure layer that enables building extensible data visualization applications with robust plugin systems, formatting capabilities, and comprehensive type safety.

Package Information

  • Package Name: @superset-ui/core
  • Type: TypeScript Library
  • Language: TypeScript
  • Installation: npm install @superset-ui/core

Core Imports

TypeScript/ES Modules

import { 
  Registry, 
  Plugin, 
  formatNumber, 
  SuperChart,
  SupersetClient 
} from '@superset-ui/core';

CommonJS

const { 
  Registry, 
  Plugin, 
  formatNumber, 
  SuperChart,
  SupersetClient 
} = require('@superset-ui/core');

Basic Usage

import { 
  Registry, 
  getNumberFormatterRegistry, 
  formatNumber,
  SupersetClient 
} from '@superset-ui/core';

// Create a custom registry
const myRegistry = new Registry<string>();
myRegistry.registerValue('greeting', 'Hello World');

// Format numbers with built-in formatters
const formatted = formatNumber(',.2f', 1234.567); // "1,234.57"

// Configure API client
SupersetClient.configure({
  host: 'http://localhost:8088',
});

Architecture

The @superset-ui/core package is organized into 18 core modules that provide different aspects of functionality:

Core Infrastructure

  • Models & Utilities - Registry system, plugins, utility functions
  • Type Definitions - Comprehensive TypeScript types for all Superset entities

Data & API Layer

  • Data Connection - HTTP client and API utilities
  • Query System - Query building, processing, and API integration

Visualization Framework

  • Chart System - Plugin-based chart framework with component registry
  • Dashboard Components - Dashboard-specific utilities and types

Formatting & Styling

  • Number/Time Formatting - Extensible formatting systems with registries
  • UI & Styling - Theme system with Emotion integration
  • Color Management - Color schemes and categorical color handling

Development Tools

  • Validation & Math - Input validation and expression evaluation
  • Internationalization - Translation and localization support

Capabilities

Registry System { .api }

Core registry infrastructure for managing extensible collections:

import { Registry, OverwritePolicy } from '@superset-ui/core';

class Registry<V, W = V | Promise<V>> {
  constructor(config?: {
    name?: string;
    overwritePolicy?: OverwritePolicy;
    setFirstItemAsDefault?: boolean;
  });
  
  registerValue(key: string, value: V): this;
  registerLoader(key: string, loader: () => W): this;
  get(key: string): V | W | undefined;
  getAsPromise(key: string): Promise<V>;
  has(key: string): boolean;
  clear(): this;
  keys(): string[];
  values(): (V | W | undefined)[];
}

enum OverwritePolicy {
  ALLOW = 'ALLOW',
  PROHIBIT = 'PROHIBIT', 
  WARN = 'WARN'
}

→ Learn more about Core Models & Utilities

Number Formatting { .api }

Comprehensive number formatting with extensible formatters:

import { formatNumber, getNumberFormatter } from '@superset-ui/core';

// Format numbers using format strings
formatNumber(format: string, value: number): string;
formatNumber(',.2f', 1234.567); // "1,234.57"
formatNumber('.1%', 0.125); // "12.5%"

// Get formatter instances
getNumberFormatter(format: string): NumberFormatter;

→ Learn more about Data Formatting

Chart Framework { .api }

Plugin-based chart system with React integration:

import { SuperChart, ChartPlugin } from '@superset-ui/core';

interface SuperChartProps {
  chartType: string;
  width?: number;
  height?: number;
  formData?: QueryFormData;
  queryData?: ChartDataResponseResult;
}

// Main chart component
const SuperChart: React.ComponentType<SuperChartProps>;

// Chart plugin base class
class ChartPlugin extends Plugin {
  constructor(config: {
    Chart: React.ComponentType<any>;
    metadata: ChartMetadata;
    transformProps?: TransformProps;
    buildQuery?: BuildQueryFunction;
  });
}

→ Learn more about Plugin System

API Client { .api }

HTTP client for Superset API communication:

import { SupersetClient, callApi } from '@superset-ui/core';

// Configure global client
SupersetClient.configure(config: {
  host?: string;
  headers?: { [key: string]: string };
  fetchRetryOptions?: FetchRetryOptions;
});

// Make API calls
callApi(config: {
  url: string;
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
  body?: BodyInit;
  headers?: HeadersInit;
}): Promise<Response>;

→ Learn more about Data Connection

Theme System { .api }

Comprehensive theming with Emotion integration:

import { 
  useTheme, 
  ThemeProvider, 
  styled, 
  css,
  SupersetTheme 
} from '@superset-ui/core';

// Theme hook
useTheme(): SupersetTheme;

// Styled components
const StyledDiv = styled.div`
  color: ${({ theme }) => theme.colors.primary.base};
`;

// Theme provider
<ThemeProvider theme={supersetTheme}>
  {children}
</ThemeProvider>

→ Learn more about UI & Styling

Internationalization { .api }

Translation and localization support:

import { t, tn } from '@superset-ui/core';

// Basic translation
t(text: string): string;
t('Hello World');

// Pluralized translation  
tn(singular: string, plural: string, count: number): string;
tn('item', 'items', count);

→ Learn more about Translation

Validation & Math { .api }

Input validation and mathematical expression evaluation:

import { 
  validateNumber, 
  validateInteger, 
  evalExpression 
} from '@superset-ui/core';

// Validation functions
validateNumber(value: unknown): string | false;
validateInteger(value: unknown): string | false;

// Math expressions
evalExpression(expression: string, value: number): number;
evalExpression('x > 10', 15); // 1 (true)

→ Learn more about Validation & Math

Related Documentation