asciidoctor-chart 1.0.0.alpha.1 → 1.0.0

data/lib/asciidoctor/chart/converter/chartjs.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+module Asciidoctor
+  module Chart
+    module Converter
+      class Html5ChartjsConverter < Asciidoctor::Chart::Converter::Base
+        CSS_VALUE_UNIT_RX = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/.freeze
+        DEFAULT_COLORS = [{ r: 220, g: 220, b: 220 }, { r: 151, g: 187, b: 205 }].freeze
+
+        def convert_line_chart node
+          data, labels = prepare_data node
+          datasets = data.map do |set|
+            color = DEFAULT_COLORS[data.index(set) % 2]
+            color_rgba = "rgba(#{color[:r]},#{color[:g]},#{color[:b]},1.0)"
+            <<~JSON
+              {
+                borderColor: "#{color_rgba}",
+                backgroundColor: "#{color_rgba}",
+                fill: false,
+                tension: 0.1,
+                data: #{set.to_s}
+              }
+            JSON
+          end.join ','
+
+          chart_id = node.attr 'id'
+          inline_styles = []
+          if (chart_height = get_height node)
+            inline_styles.push("height: #{chart_height}")
+          end
+          if (chart_width = get_width node)
+            inline_styles.push("max-width: #{chart_width}")
+          end
+          maintain_aspect_ratio = chart_height.nil? && chart_width.nil?
+          title_element = node.title? ? %(\n  <div class="title">#{node.captioned_title}</div>) : ''
+          <<~HTML
+            <div class="chartblock">
+              <div class="content chartjs-content" style="#{inline_styles.join('; ')}">
+                <canvas id="#{chart_id}"></canvas>
+              </div>#{title_element}
+            </div>
+            <script>
+            window.addEventListener('load', function(event) {
+              var data = {
+                labels: #{labels.to_s},
+                datasets: [#{datasets}]
+              }
+              var chart = new Chart(document.getElementById("#{chart_id}").getContext("2d"), {
+                type: 'line',
+                data: data,
+                options: {
+                  interaction: {
+                    mode: 'index'
+                  },
+                  responsive : true,
+                  maintainAspectRatio: #{maintain_aspect_ratio},
+                  plugins: {
+                    legend: {
+                      display: false
+                    }
+                  }
+                }
+              })
+            })
+            </script>
+          HTML
+        end
+
+        def prepare_data node
+          raw_data = node.attr 'data-raw', []
+          return [[], []] if raw_data.length <= 1 # question: should we warn?
+
+          labels = raw_data[0]
+          raw_data.shift
+          [raw_data, labels]
+        end
+
+        private
+
+        def get_height node
+          return unless (height = node.attr 'height')
+
+          to_css_size height
+        end
+
+        def get_width node
+          return unless (width = node.attr 'width')
+
+          to_css_size width
+        end
+
+        def to_css_size str
+          return str unless (parts = str.match(CSS_VALUE_UNIT_RX))
+
+          value, unit = parts.captures
+          unit = 'px' if unit == ''
+          "#{value}#{unit}"
+        end
+      end
+    end
+  end
+end

data/lib/asciidoctor/chart/converter.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Asciidoctor
+  module Chart
+    module Converter
+      class Base
+        def handles? type
+          respond_to? %(convert_#{type}_chart)
+        end
+      end
+    end
+  end
+end

data/lib/asciidoctor/chart/docinfo_processor.rb

@@ -6,26 +6,75 @@ module Asciidoctor
       use_dsl
       # at_location :head
 
-      C3JS_STYLESHEET = '<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.css">'
-      D3JS_SCRIPT = '<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js" charset="utf-8"></script>'
-      C3JS_SCRIPT = '<script src="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>'
-
-      CHARTIST_STYLESHEET = '<link rel="stylesheet" href="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">'
-      CHARTIST_SCRIPT = '<script src="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>'
-
-      CHARTJS_SCRIPT = '<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>'
-
-      def process _doc
-        # TODO: Import only the required engines
-        # TODO: Honor linkcss and copycss
-        <<~EOS
-        #{C3JS_STYLESHEET}
-        #{D3JS_SCRIPT}
-        #{C3JS_SCRIPT}
-        #{CHARTIST_STYLESHEET}
-        #{CHARTIST_SCRIPT}
-        #{CHARTJS_SCRIPT})
-        EOS
+      C3JS_DIR_ATTR = 'c3jsdir'
+      C3JS_DEFAULT_PATH = 'https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/'
+
+      CHARTJS_DIR_ATTR = 'chartjsdir'
+      CHARTJS_DEFAULT_PATH = 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/'
+
+      CHARTIST_DIR_ATTR = 'chartistdir'
+      CHARTIST_DEFAULT_PATH = 'https://cdn.jsdelivr.net/npm/chartist@0.11.x/dist/'
+
+      D3JS_DIR_ATTR = 'd3jsdir'
+      D3JS_DEFAULT_PATH = 'https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/'
+
+      DEFAULT_STYLE = <<~HTML.chomp
+        <style>
+          .chartblock {
+            margin-bottom: 1.25em;
+          }
+          .chartblock > .title {
+            text-rendering: optimizeLegibility;
+            text-align: left;
+            font-size: 1rem;
+            font-style: italic;
+            line-height: 1.45;
+            color: #7a2518;
+            font-weight: 400;
+          }
+          .chartblock > .chartjs-content {
+            position: relative;
+            margin-bottom: 0.25em;
+          }
+        </style>
+      HTML
+
+      def process(doc)
+        engines = doc.x_chart[:engines]
+        (engines.map {|engine| send(engine, doc) }.to_a + [DEFAULT_STYLE]).join "\n"
+      end
+
+      private
+
+      def get_path(doc, attr_name, default_path, asset_to_include)
+        doc.normalize_web_path asset_to_include, (doc.attr attr_name, default_path), false
+      end
+
+      def create_script_directive(doc, attr_name, default_path, asset_to_include)
+        %(<script src="#{get_path doc, attr_name, default_path, asset_to_include}"></script>)
+      end
+
+      def create_link_css_directive(doc, attr_name, default_path, asset_to_include)
+        %(<link rel="stylesheet" href="#{get_path doc, attr_name, default_path, asset_to_include}">)
+      end
+
+      def chartjs(doc)
+        create_script_directive(doc, CHARTJS_DIR_ATTR, CHARTJS_DEFAULT_PATH, 'chart.min.js')
+      end
+
+      def chartist(doc)
+        result = []
+        result << create_link_css_directive(doc, CHARTIST_DIR_ATTR, CHARTIST_DEFAULT_PATH, 'chartist.min.css')
+        result << create_script_directive(doc, CHARTIST_DIR_ATTR, CHARTIST_DEFAULT_PATH, 'chartist.min.js')
+        result
+      end
+
+      def c3js(doc)
+        result = []
+        result << create_link_css_directive(doc, C3JS_DIR_ATTR, C3JS_DEFAULT_PATH, 'c3.min.css')
+        result << create_script_directive(doc, D3JS_DIR_ATTR, D3JS_DEFAULT_PATH, 'd3.min.js')
+        result << create_script_directive(doc, C3JS_DIR_ATTR, C3JS_DEFAULT_PATH, 'c3.min.js')
+        result
       end
     end
   end

data/lib/asciidoctor/chart/html5_chart_converter_ext.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Asciidoctor
+  module Chart
+    module Html5ChartConverterExt
+      def convert_chart node
+        chart_engine = node.attr 'engine'
+        chart_type = node.attr 'type'
+        chart_converter = Asciidoctor::Chart::Registry.for chart_engine
+
+        if chart_converter
+          if chart_converter.handles? chart_type
+            chart_converter.send "convert_#{chart_type}_chart", node
+          else
+            logger.warn %(missing chart convert handler for type '#{chart_type}' in #{chart_converter})
+            nil
+          end
+        else
+          logger.warn %(missing chart convert for engine '#{chart_engine}')
+          nil
+        end
+      end
+    end
+  end
+end

data/lib/asciidoctor/chart/preprocessor.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Asciidoctor
+  module Chart
+    class Preprocessor < Asciidoctor::Extensions::Preprocessor
+      def process document, reader
+        document.extend(ChartBlockTracker)
+
+        reader
+      end
+    end
+  end
+end

data/lib/asciidoctor/chart/registry.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Asciidoctor
+  module Chart
+    module Registry
+      @registry = {}
+
+      def self.register converter, engine
+        @registry[engine] = converter
+      end
+
+      def self.for engine
+        @registry[engine]
+      end
+    end
+  end
+end

data/lib/asciidoctor/chart/version.rb

@@ -2,6 +2,6 @@
 
 module Asciidoctor
   module Chart
-    VERSION = '1.0.0.alpha.1'
+    VERSION = '1.0.0'
   end
 end

data/lib/asciidoctor/chart.rb

@@ -1,19 +1,51 @@
 # frozen_string_literal: true
 
 require 'asciidoctor/extensions'
+require 'tilt'
+require_relative 'chart/html5_chart_converter_ext'
+require_relative 'chart/registry'
+require_relative 'chart/preprocessor'
 require_relative 'chart/block_macro_processor'
 require_relative 'chart/block_processor'
 require_relative 'chart/docinfo_processor'
-require_relative 'chart/backend'
+require_relative 'chart/chart_block'
 require_relative 'chart/plain_ruby_csv'
 require_relative 'chart/plain_ruby_random'
-require_relative 'chart/c3js/chart_builder'
-require_relative 'chart/chartjs/chart_builder'
-require_relative 'chart/chartist/chart_builder'
+require_relative 'chart/converter'
+require_relative 'chart/converter/c3js'
+require_relative 'chart/converter/chartist'
+require_relative 'chart/converter/chartjs'
+
+CHART_HTML_TEMPLATE = Tilt.new('chart.html.erb', format: :html5, pretty: true, disable_escape: true) do |_t|
+  <<-ERB
+    <%= Class.new.extend(Asciidoctor::Chart::Html5ChartConverterExt).convert_chart self %>
+  ERB
+end
+
+# providers
+Asciidoctor::Chart::Registry.register Asciidoctor::Chart::Converter::Html5ChartjsConverter.new, 'chartjs'
+Asciidoctor::Chart::Registry.register Asciidoctor::Chart::Converter::Html5ChartistConverter.new, 'chartist'
+Asciidoctor::Chart::Registry.register Asciidoctor::Chart::Converter::Html5C3jsConverter.new, 'c3js'
+
+def register_chart_converter converter
+  if (converter.instance_of? Asciidoctor::Converter::TemplateConverter) || (converter.respond_to? 'register')
+    # Template based converter
+    converter.register 'chart', CHART_HTML_TEMPLATE
+  else
+    converter.extend(Asciidoctor::Chart::Html5ChartConverterExt)
+  end
+end
 
 Asciidoctor::Extensions.register do
   return unless document.basebackend? 'html'
 
+  converter = document.converter
+  if converter.instance_of? Asciidoctor::Converter::CompositeConverter
+    register_chart_converter(converter.converters[0])
+  else
+    register_chart_converter(converter)
+  end
+  preprocessor Asciidoctor::Chart::Preprocessor
   block_macro Asciidoctor::Chart::BlockMacroProcessor
   block Asciidoctor::Chart::BlockProcessor
   docinfo_processor Asciidoctor::Chart::DocinfoProcessor

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: asciidoctor-chart
 version: !ruby/object:Gem::Version
-  version: 1.0.0.alpha.1
+  version: 1.0.0
 platform: ruby
 authors:
 - Guillaume Grossetie
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-08-15 00:00:00.000000000 Z
+date: 2022-10-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: asciidoctor
@@ -24,6 +24,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '2.0'
+- !ruby/object:Gem::Dependency
+  name: tilt
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 2.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 2.0.0
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
@@ -52,35 +66,42 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 3.9.0
-description: A set of Asciidoctor extensions that add a chart block and block macro
-  to AsciiDoc for including charts in your AsciiDoc document.
+description: |-
+  A set of Asciidoctor extensions that add a chart block and block macro to AsciiDoc
+  for including charts in your AsciiDoc document.
 email: ggrossetie@gmail.com
 executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- CHANGELOG.adoc
 - LICENSE.adoc
 - README.adoc
 - asciidoctor-chart.gemspec
 - lib/asciidoctor-chart.rb
 - lib/asciidoctor/chart.rb
-- lib/asciidoctor/chart/backend.rb
 - lib/asciidoctor/chart/block_macro_processor.rb
 - lib/asciidoctor/chart/block_processor.rb
-- lib/asciidoctor/chart/c3js/chart_builder.rb
-- lib/asciidoctor/chart/chartist/chart_builder.rb
-- lib/asciidoctor/chart/chartjs/chart_builder.rb
+- lib/asciidoctor/chart/chart_block.rb
+- lib/asciidoctor/chart/converter.rb
+- lib/asciidoctor/chart/converter/c3js.rb
+- lib/asciidoctor/chart/converter/chartist.rb
+- lib/asciidoctor/chart/converter/chartjs.rb
 - lib/asciidoctor/chart/docinfo_processor.rb
+- lib/asciidoctor/chart/html5_chart_converter_ext.rb
 - lib/asciidoctor/chart/plain_ruby_csv.rb
 - lib/asciidoctor/chart/plain_ruby_random.rb
+- lib/asciidoctor/chart/preprocessor.rb
+- lib/asciidoctor/chart/registry.rb
 - lib/asciidoctor/chart/version.rb
 homepage: https://asciidoctor.org
 licenses:
 - MIT
 metadata:
   bug_tracker_uri: https://github.com/asciidoctor/asciidoctor-chart/issues
-  mailing_list_uri: http://discuss.asciidoctor.org
+  community_chat_uri: https://asciidoctor.zulipchat.com
   source_code_uri: https://github.com/asciidoctor/asciidoctor-chart
+  rubygems_mfa_required: 'true'
 post_install_message: 
 rdoc_options: []
 require_paths:
@@ -92,11 +113,11 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
-rubygems_version: 3.0.3
+rubygems_version: 3.0.3.1
 signing_key: 
 specification_version: 4
 summary: Adds a chart block and block macro to AsciiDoc

data/lib/asciidoctor/chart/backend.rb

@@ -1,58 +0,0 @@
-# frozen_string_literal: true
-
-module Asciidoctor
-  module Chart
-    class Backend
-      def self.resolve_engine attrs, document
-        if attrs.key? 'engine'
-          attrs['engine'].downcase
-        elsif document.attributes.key? 'chart-engine'
-          document.attributes['chart-engine'].downcase
-        else
-          'c3js'
-        end
-      end
-
-      def self.process engine, attrs, raw_data
-        # TODO: Check that the engine can process the required type (bar, line, step...)
-        type = attrs['type']
-        case engine
-        when 'c3js'
-          if type == 'pie'
-            C3js::ChartBuilder.pie raw_data, attrs
-          else
-            data, labels = C3js::ChartBuilder.prepare_data raw_data
-            case type
-            when 'bar'
-              C3js::ChartBuilder.bar data, labels, attrs
-            when 'line'
-              C3js::ChartBuilder.line data, labels, attrs
-            when 'step'
-              C3js::ChartBuilder.step data, labels, attrs
-            when 'spline'
-              C3js::ChartBuilder.spline data, labels, attrs
-            else
-              # By default chart line
-              C3js::ChartBuilder.line data, labels, attrs
-            end
-          end
-        when 'chartist'
-          data, labels = Chartist::ChartBuilder.prepare_data raw_data
-          case type
-          when 'bar'
-            Chartist::ChartBuilder.bar data, labels, attrs
-          when 'line'
-            Chartist::ChartBuilder.line data, labels, attrs
-          else
-            # By default chart line
-            Chartist::ChartBuilder.line data, labels, attrs
-          end
-        when 'chartjs'
-          data, labels = Chartjs::ChartBuilder.prepare_data raw_data
-          # By default chart line
-          Chartjs::ChartBuilder.line data, labels, attrs
-        end
-      end
-    end
-  end
-end