Skip to main content

DataVisualizationButton Plugin

The DataVisualizationButton plugin is a powerful addition to the On-Codemerge editor, designed to enhance data presentation through interactive charts and diagrams. It enables users to insert and manage various types of data visualizations directly within the editor.

on-CodeMerge

A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product. This intuitive tool for developers of all skill levels.
Result:
Preview:

Prerequisites​

For the DataVisualizationButton plugin to function properly, it's necessary to include Chartist.js styles and scripts. You can either link them directly in your HTML or import them in your JavaScript file.

HTML Linking​

Include the following lines in your HTML head section:

<link href="https://cdn.jsdelivr.net/npm/chartist@1.3.0/dist/index.min.css" rel="stylesheet">

JavaScript Import​

Alternatively, you can import the required styles and components directly in your JavaScript file:

import 'chartist/dist/index.css';

Integration​

To integrate the DataVisualizationButton plugin into the On-Codemerge editor, it needs to be imported and registered with the EditorCore. Below is a guide to help you get started:

Initialize and Register DataVisualizationButton
import EditorCore from 'on-codemerge';
import { DataVisualizationButton } from 'on-codemerge/dataVisualizationButton';

document.addEventListener('DOMContentLoaded', () => {
  const appElement = document.getElementById('app');
  if (appElement) {
    const editor = new EditorCore(appElement);
    editor.registerModule(new DataVisualizationButton());
  }
});

Features​

The DataVisualizationButton plugin brings the following features:

  • Chart Insertion: Users can easily add different types of charts to their content.
  • Dynamic Data Handling: It offers functionality to dynamically load and update chart data.
  • Interactive Editing: Provides an intuitive interface for configuring and modifying charts.

The plugin currently supports various chart types like line, bar, pie, etc., and is capable of handling complex data sets.

How it Works​

This plugin operates by incorporating DiagramManager, a component responsible for managing and rendering charts. When a user decides to add a chart:

  1. Chart Creation: A unique identifier is generated for each chart, and a DiagramManager instance is associated with it.
  2. Data Management: The plugin retrieves and parses chart data from data attributes in the HTML, ensuring accurate and dynamic representation.
  3. Chart Rendering: Utilizes Chartist.js for rendering, providing a responsive and customizable charting experience.

When content changes, the DataVisualizationButton automatically reloads the charts, maintaining their current state and data.

The plugin also includes cleanup mechanisms to ensure that upon destruction, all associated resources are properly released, preventing memory leaks and ensuring optimal performance.