Воскресенье, 28 мая 2023 17:54

Highcharts с webpack или sprockets на Ruby on Rails

Оцените материал
(0 голосов)

Итак, строим график Highcharts в проекте, основанном на Ruby on Rails 7 ( jsbundling-rails[webpack] ).

Как более-менее понятно, в общем, из названия, здесь будут описаны два способа (из множества возможных): в основном, нас интересует сегодня компиляция и обслуживание активов посредством webpack, тем не менее - коснемся и старого, но по-прежнему вполне работоспособного способа достижения данной цели средствами sprockets.

 

Dev banner 2

 

Об использовании importmap-rails в контексте решения аналогичной задачи можно почитать на форуме.

 

В качестве примера создадим приложение, отображающее в виде эффектного чарта актуальные курсы валют по версии openexchangerates.org. Понадобится бесплатный ключ доступа; написанный же быстрой строкой контроллер приложения способен выглядеть как-то так:

class RatesController < ApplicationController
    def get_current_exchange
		return Rails.cache.fetch('get_current_exchange', :expires_in => 10.hours) {
			require 'money/bank/openexchangerates_bank'
			moxb = Money::Bank::OpenexchangeratesBank.new
			moxb.access_key = ENV['KEY_OPENEXCHARGERATES']
			[moxb.update_rates, moxb.rates_timestamp]
		}
	end
    def index
		@current_exchange = get_current_exchange[0]
		@timestamp = get_current_exchange[1]
	end
end

 

Вьюха странички (как и полностью готовое в работе приложение) доступна в репозитории exchange-rates-rails-app. Думаю, легко найдете:

Увидеть на гитхабе.

Не располагаю в данный момент возможностью продемонстрировать демку Ruby on Rails, но могу показать аналог этого чарта на реакте.

 

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

rails new exchange-rates-app -j webpack

 

Нам понадобятся в Gemfile эти джемы:

gem "money-openexchangerates-bank"
gem "figaro"
gem "sassc-rails"

 

Бундлим, затем:

bundle exec figaro install

 

 Редактируем:

# config/application.yml
KEY_OPENEXCHARGERATES: '************************'

 

Далее:

yarn add highcharts bootstrap @popperjs/core

 

Редактируем:

# app/javascript/application.js

import "@hotwired/turbo-rails"
import "./controllers"
import "bootstrap"
import Highcharts from 'highcharts'
import addMore from "highcharts/highcharts-more"
import addExporting from "highcharts/modules/exporting"
import addExportData from "highcharts/modules/export-data"
import addAccessibility from "highcharts/modules/accessibility"
addMore(Highcharts)
addExporting(Highcharts)
addExportData(Highcharts)
addAccessibility(Highcharts)
window.Highcharts = Highcharts

 

# app/assets/stylesheets/application.scss

@import '../../../node_modules/bootstrap/scss/bootstrap';

 

Пожалуй, на этом все:

rake assets:precompile
rails s

 

Замечу, что скрипт Highcharts во вьюхе придется обрамить следующим образом:

<script>
document.addEventListener('DOMContentLoaded', function () {

...

});
</script>

 

, также, как показано выше, оказывается неизбежным использование:

window.Highcharts = Highcharts

 

Поддержка на форуме Highcharts уверяет, что в этих двух хаках нет нужды, но без них, воля ваша, Highcharts на Ruby on Rails у меня не работает:

Uncaught ReferenceError: Highcharts is not defined
at HTMLDocument.<anonymous>

 

 , и ровно то же самое говорят многочисленные ответы и комментарии на StackOverflow. Впрочем, если ваш опыт диктует иные решения - не стесняйтесь описать их здесь или на форуме.

Все получается несколько проще, если функции конвейера активов (asset pipeline) полностью (включая и джаваскрипты) возложена на sprockets (gem "sprockets-rails").

В этом случае:

# app/assets/config/manifest.js

//= link highcharts/highcharts.js
//= link highcharts/highcharts-more.js
//= link highcharts/modules/exporting.js
//= link highcharts/modules/export-data.js
//= link highcharts/modules/accessibility.js

 

, также добавим эту строчку:

# config/initializers/assets.rb

Rails.application.config.assets.paths << Rails.root.join('node_modules')

 

И вот на этом точно все. Указанный репозиторий GitHub по ссылке выше содержит в Readme ссылку на commit, иллюстрирующий также и использование sprockets-rails в качестве единственного asset pipeline. Возможно, в ряде случаев это по-прежнему удобно.

Последнее изменениеПонедельник, 18 марта 2024 15:25

Оставить комментарий

Добавьте ваш комментарий

В блоге

Tic-Tac-Toe with a Neural Network

Комментарии в блоге

Заказать сайт

Веб-разработка. Заказать сайт

Вы можете заказать сайт-визитку, блог, корпоративный сайт, интернет-магазин или коммерческий web-портал.