@devgateway/dvz-wp-commons

Common utilities for Data Visualization in WordPress that can also be used in other projects.


Installation

``bash
npm install @devgateway/dvz-wp-commons


or

yarn add @devgateway/dvz-wp-commons

or

pnpm add @devgateway/dvz-wp-commons
`

Overview

This package provides a collection of reusable components, utilities, and type definitions for data-viz WordPress. It facilitates consistent handling of chart configurations, data formatting, API connections, and more.

This package is used internally by DevGateway projects and is designed to be compatible with the project customizer, allowing for easy integration and extension in custom implementations.

Components

$3

- APIConfig: Configuration component for API connections.
- CSVConfig: Configuration for CSV data sources.
- MapCSVSourceConfig: Configuration for CSV data sources specific to maps.
- DataFilters: Components for filtering data in visualizations.

$3

- ChartColors: Provides color schemes (categorical, sequential, diverging) for charts.
- ChartLegends: Customizable legend components for charts.
- ChartMeasures: Components for configuring chart measures.
- Measures: Utilities for handling data measures.
- Tooltip: Customizable tooltip component for charts.

$3

- BlockEditWithAPIMetadata: Block editor component with API metadata support.
- BlockEditWithFilters: Block editor component with filter capabilities.
- ComponentWithSettings: Component wrapper with settings panel.
- SizeConfig: Configuration component for size settings.

$3

- Format: Advanced formatting utilities for chart data.

$3

- Post: Components and utilities for handling WordPress post data.

Utilities

$3

- APIutils: Utility functions for API operations.
- getTranslatedOptions
- getTranslation
- isSupersetAPI

$3

- MobileConfigUtils: Utilities for mobile configurations.
- extractAxisValues
- getSelectedLabelsForApp
- transformDataToAppObject
- updateMeasureLabels
- getSelectedItemsForApp
- getStoredOrSetItem

$3

- Util: General UI utilities.
- panelFocus
- togglePanel

$3

- BLOCKS_CATEGORY: Category definition for blocks.
- BLOCKS_NS: Namespace for blocks.
- DEFAULT_FORMAT_SETTINGS: Default settings for formatting.

Icons

- GenericIcon: Generic icon component.
- ChartIcon: Chart-specific icon component.

Types

$3

- Options: Basic option type with label, value, and optional labels.
- Dimension: Interface for data dimensions.
- Category/CategoryItem: Types for data categorization.
- Measure: Interface for data measures.
- Filter: Interface for data filters.
- FileContent: Interface for file content metadata.

$3

- ChartColorsProps: Props for chart colors component.
- ChartLegendsProps: Props for chart legends component.
- ChartMeasuresProps: Props for chart measures component.
- FormatProps: Props for format component.
- MeasuresProps: Props for measures component.
- DataFiltersProps: Props for data filters component.
- MapCSVSourceConfigProps: Props for map CSV source config component.

$3

- BlockEditWithAPIMetadataProps/State: Props and state for BlockEditWithAPIMetadata.
- BlockEditWithFiltersProps/State: Props and state for BlockEditWithFilters.
- ComponentWithSettingsProps/State: Props and state for ComponentWithSettings.
- SizeConfigProps: Props for SizeConfig component.

$3

- DgSettings: Interface for global settings.
- EurekaResponse: Interface for Eureka service responses.
- Menu: Interface for menu structure.
- Media: Interface for media attachments.
- SearchResult/SearchResults: Types for search functionality.
- Taxonomy/Taxonomies: Types for WordPress taxonomies.
- Wp_Types: Types for WordPress content types.

$3

- Post: Interface for WordPress posts.
- PostContent: Interface for post content.
- PostLinks: Interface for post links.
- PostYoastHeadJSON: Interface for Yoast SEO data.
- PotentialActionType: Enum for schema action types.
- PostSchema: Interface for structured data schema.

Integration with Project Customizer

This package is designed to be integrated with the project customizer, allowing for:

- Custom component configurations
- Theme-specific styling overrides
- Extension of data types for project-specific needs
- Custom visualization implementations

When used with the project customizer, components from this package can be easily configured and extended to meet specific project requirements.

Usage Examples

$3

`jsx
import { ChartColors, ChartLegends, Format } from '@devgateway/dvz-wp-commons';

const MyChartComponent = ({ attributes, setAttributes }) => {
return (



);
};
`

$3

`jsx
import { APIConfig } from '@devgateway/dvz-wp-commons';

const MyAPIComponent = ({ attributes, setAttributes }) => {
return (
attributes={attributes}
setAttributes={setAttributes}
/>
);
};
``

License

MIT