Как добавить диаграммы в SolidJS с помощью ApexCharts

Автор выбрал программу Write for DOnations.

Введение

Визуализация данных предоставляет пользователям интуитивно понятный способ узнать, что происходит в системе их веб-приложений. SolidJS.

SolidJS — это библиотека JavaScript для создания пользовательских интерфейсов. Поскольку SolidJS основан на том же дизайне, что и библиотеки JavaScript, например, Vite является основным инструментом сборки, упаковывая ваше приложение в JavaScript, чтобы оно было компактным.

ApexCharts — это настраиваемая библиотека диаграмм JavaScript с открытым исходным кодом для создания интерактивных визуализаций для веб-приложений. Вы можете интегрировать ApexCharts со многими популярными платформами JavaScript, включая SolidJS. ApexCharts предлагает широкий выбор гибких и адаптивных диаграмм, которые можно отображать на нескольких экранах.

В этом руководстве вы интегрируете ApexCharts в приложение SolidJS для визуализации данных. Вы разработаете приложение, которое извлекает данные о погоде из OpenWeatherMap API и отображает их в виде гистограммы.

Предпосылки

Чтобы следовать этому руководству, вам понадобится следующее:

На вашем компьютере установлен Node.js, который можно настроить, следуя руководству по установке Node.js.
Веб-браузер, например Chrome.
(Необязательно) Базовые знания библиотеки SolidJS. Вы можете ознакомиться с документацией по SolidJS.
(Необязательно) Текстовый редактор, поддерживающий подсветку синтаксиса JavaScript, например Atom. В этом руководстве используется редактор командной строки nano.

Шаг 1 — Создание проекта SolidJS

На этом шаге вы создадите проект SolidJS и установите все необходимые зависимости для создания диаграмм. Вы создадите приложение SolidJS с шаблоном Vite, содержащим необходимый шаблонный код.

В новом сеансе терминала создайте и перейдите в новый каталог, который вы будете использовать для этого руководства:

mkdir charts
cd charts

В этом руководстве каталог будет называться charts, но вы можете называть его как хотите.

Затем запустите команду npx degit, чтобы клонировать шаблон из репозитория solid/js/templates/js в папку вашего проекта:

npx degit solidjs/templates/js solid-chart

Вы можете заменить solid-chart на желаемое имя вашего приложения.

Примечание. TypeScript — это надмножество JavaScript, предлагающее дополнительную статическую типизацию, классы и интерфейсы. Он также предлагает улучшенное завершение кода и IntelliSense для JSX. Если вы предпочитаете использовать TypeScript, выполните следующие команды:

npx degit solidjs/templates/ts solid-chart

Вы получите тот же вывод для шаблона /ts, что и для шаблона /js.

Вы получите следующий вывод:

Output
> cloned solidjs/templates#HEAD to solid-chart

Этот вывод подтверждает, что шаблон был сохранен на вашем компьютере. После того как вы клонировали шаблон в папку своего проекта, вы можете перейти в папку шаблона и установить необходимые зависимости для проекта:

cd solid-chart
npm install

NPM установит необходимые зависимости для проекта.

Для интеграции диаграмм в SolidJS вам понадобятся еще две зависимости: Solid-ApexCharts.

ApexCharts — это библиотека диаграмм JavaScript для создания интерактивных визуализаций для веб-приложений. ApexCharts поддерживает четырнадцать диаграмм, включая столбчатые, линейные, площадные, круговые, столбцовые, прямоугольные, подсвечники, тепловую карту и другие.

Solid-ApexCharts — это оболочка SolidJS для ApexCharts, позволяющая использовать элементы ApexCharts в качестве компонентов SolidJS.

Запустите эту команду, чтобы установить эти зависимости:

npm install apexcharts solid-apexcharts

Затем запустите сервер разработки с помощью этой команды:

npm run dev

Вы получите вывод, подобный этому:

Output...
  vite v2.9.15 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 605ms.

Теперь ваше приложение будет работать на порту 3000. Откройте браузер и введите URL-адрес http://localhost:3000/ для доступа к стартовой странице SolidJS:

Примечание. Если вы следуете руководству на удаленном сервере, вы можете использовать переадресацию портов для тестирования приложения в браузере.

Пока сервер разработки все еще работает, откройте другой терминал на локальном компьютере и введите следующую команду:

ssh -L 3000:localhost:3000  your_non_root_user@your_server_ip

После подключения к серверу перейдите по адресу http://localhost:3000 в веб-браузере вашего локального компьютера. Держите второй терминал открытым на протяжении оставшейся части этого руководства.

После того, как вы установили все зависимости, вы можете получать данные из API.

Шаг 2 — Получение данных из API

На этом шаге вы будете использовать Fetch API для получения данных из OpenWeatherMap. Вы будете использовать широту определенного места и показывать изменения на диаграмме.

В предпочитаемом вами редакторе откройте файл App.jsx в папке src. В этом руководстве используется редактор командной строки nano:

nano src/App.jsx

Примечание. Если вы использовали шаблон TypeScript на шаге 1, вы не будете использовать файлы .jsx. Вместо этого откройте файлы .tsx для любого файла .jsx на протяжении всего руководства.

Здесь вы получите данные из API и передадите их другому компоненту, чтобы он мог отобразить диаграмму.

Сначала удалите всю информацию, которая была автоматически сгенерирована в файле шаблона.

Затем импортируйте createEffect из solid-js, добавив эту строку:

import { createEffect } from "solid-js";

Теперь вы создадите эффект, когда функция вызывает API. Добавьте эти строки в файл:

...

createEffect(() => {
  const fetchData = async () => {
    const res = await fetch("http://api.openweathermap.org/geo/1.0/direct?q=London&limit=5&appid=2c36818bb5ca9e829313dd736fd15859");
    const data = await res.json();
  };

  fetchData()
});

Асинхронная функция под названием fetchData запрашивает API OpenWeatherMap, используя API Fetch. Эта функция запускается сразу после монтирования компонента App, потому что fetchData вызывается в createEffect. API OpenWeatherMap обычно возвращает массив объектов погоды. Здесь используется ограничение 5. В данных используются только имя и широта (в вызове API запрос — London, а Ключ API — это строка, определяемая appid=).

Поскольку fetchData является асинхронной функцией, вам нужно ожидать ответа. Ответ сохраняется в переменной res, когда она доступна. Как только сервер получает данные, ответ преобразуется в JSON с помощью функции .json() и сохраняется в переменной data.

После извлечения данных следующая задача — сохранить их в сигнале и экспортировать.

Оставаясь в src/App.jsx, импортируйте createSignal из solid-js. Для этого обновите исходный импорт, добавив выделенный текст:

import { createSignal,  createEffect } from "solid-js";
...

Затем создайте переменную Signal для данных диаграммы сразу после оператора импорта, добавив выделенный текст:

import { createSignal, createEffect } from 'solid-js';

const [chartData, setChartData] = createSignal({});
...

В Solid Сигналы являются основой реактивности. Они включают в себя динамические значения, поэтому, если вы измените значение Signal, все, что зависит от него, будет обновлено автоматически.

Начальное значение — это параметр, заданный для создания Сигнала, а массив с двумя функциями (геттер и сеттер) — это возвращаемые значения. Первое возвращаемое значение — это не само значение, а геттер, функция, возвращающая текущее значение. Для правильного обновления библиотека должна отслеживать, где считывается этот сигнал. В этом руководстве chartData является методом получения, а setChartData — методом установки. Signal инициализируется пустым объектом.

ApexCharts требует, чтобы вы указали параметры. В этом руководстве вы укажете параметр xaxis, который добавляет массивы data и categories.

Для этого вы создадите массив значений, возвращаемых API, с помощью метода map(). Метод map() вызывает функцию для каждого элемента массива, возвращая результаты в новом массиве. Добавьте выделенные строки в асинхронную функцию fetchData:

...
createEffect(() => {
  const fetchData = async () => {
    const res = await fetch("http://api.openweathermap.org/geo/1.0/direct?q=London&limit=5&appid=2c36818bb5ca9e829313dd736fd15859");
    const data = await res.json();
    
    setChartData({
      series: [
        {
          name: 'Latitudes in London',
          data: data.map((d) => (d.lat))
        }
      ],
      xaxis: {
        categories: data.map((d) => (d.name))
      }
    });
  };

  fetchData()
});

Внутри функции установки setChartData вы указываете значения для series и xaxis Apexcharts.

В массиве series вы указываете значение для свойств name и data. Вы перебираете данные, возвращенные с сервера, используя map(), и передаете значения широты, представленные lat. Это будут значения в каждой диаграмме.

Объект xaxis ожидает свойство categories, которое устанавливается путем итерации по data с помощью метода map() и передавая значения name. Это значение представляет название города на каждой диаграмме.

После того как вы обновили chartData с помощью параметров диаграммы и данных из API, вам необходимо указать стиль и экспортировать его. Добавьте выделенные строки в файл:

import { createSignal, createEffect } from "solid-js";
import styles from './App.module.css';

const [chartData, setChartData] = createSignal({});

createEffect(() => {
  const fetchData = async () => {
    const res = await fetch("http://api.openweathermap.org/geo/1.0/direct?q=London&limit=5&appid=2c36818bb5ca9e829313dd736fd15859")
    const data = await res.json();

    setChartData({
      series: [
        {
          name: 'Latitudes in London',
          data: data.map((d) => (d.lat))
        }
      ],
      xaxis: {
        categories: data.map((d) => (d.name))
      }
    });

  }

  fetchData()
});

function App() {

  return (
    <^> 
        <div class={styles.App}>
          <h2>Using ApexCharts.js to create charts in SolidJS</h2>
          <h3>Bar Chart</h3>
        </div>
    <^>
  );
}

export { chartData }

export default App;

Во-первых, вы импортируете styles для использования в разделе возврата.

Затем вы определяете возврат для функции App(), которая будет создавать заголовки для диаграммы при запуске приложения. Он вызывает styles для создания двух заголовков.

Сигналы из SolidJS можно экспортировать и использовать в любом другом компоненте, поэтому вы также экспортируете chartData ближе к концу файла.

Сохраните и закройте файл.

Поскольку сигнал экспортируется, теперь вы можете создать компонент диаграммы для его использования и отображения.

Шаг 3 — Создание диаграммы с данными из API

На этом этапе вы создадите компонент диаграммы и будете использовать данные из API для отображения диаграммы.

В папке src создайте папку components:

mkdir src/components

Затем добавьте новый файл Charts.jsx:

nano src/components/Charts.jsx

В новый файл Charts.jsx импортируйте SolidApexCharts и chartData:

import { SolidApexCharts } from 'solid-apexcharts';
import { chartData } from '../App';

Теперь добавьте следующие строки, чтобы создать функцию Charts:

function Charts() {

  return (
    <SolidApexCharts width="1200" type="bar" options={chartData()}  />
  );
};

export default Charts;

Функция Charts будет использовать информацию из переменной chartData, заданной ранее, для создания диаграммы bar размером 1200 пикселей. широкий. Вы передаете chartData в качестве значения options и устанавливаете ширину и тип диаграммы в компоненте SolidApexCharts.

Сохраните и закройте файл.

Откройте файл src/App.jsx:

nano src/App.jsx

Теперь импортируйте компонент Charts в файл App.jsx:

import { createSignal, createEffect } from "solid-js";
import styles from './App.module.css';
import Charts from './components/Charts';

const [chartData, setChartData] = createSignal({});

function App() {

  return (
    <div class={styles.App}>
      <h2>Using ApexCharts.js to create charts in SolidJS</h2>
      <h3>Bar Chart</h3>
      <Charts />
    </div>
  );
};

export { chartData }

export default App;

Во-первых, вы импортируете Charts. Затем вы добавляете компонент чуть ниже элемента h3 для отображения при запуске приложения. В этой строке будет отображаться гистограмма с динамическими данными.

Сохраните и закройте файл.

Когда вы обновите свое приложение в браузере, появится гистограмма.

Вы также можете просмотреть файлы, созданные в этом руководстве, в репозитории сообщества DigitalOcean.

Заключение

В этой статье вы создали приложение SolidJS, которое извлекает данные из API для создания диаграмм. Вы использовали Apexcharts и Solid-ApexCharts для визуализации данных в приложении SolidJS. Теперь вы можете создавать другие типы диаграмм с динамическими данными. Попробуйте изменить диаграмму с гистограммы на другой тип диаграммы, поддерживаемый ApexCharts.

Чтобы узнать больше о SolidJS и его возможностях, посетите документацию ApexCharts.