ZingChart не рендеринг в винограде Js пользовательский тип компонента - PullRequest
Новая
       13

ZingChart не рендеринг в винограде Js пользовательский тип компонента

2 голосов
/ 22 января 2020

Я пытаюсь интегрировать ZingChart как пользовательский тип компонента в Grapes Js. Я следовал некоторым примерам и реализовал следующий плагин.

блоки. js

import { lineChartRef, chartType } from './consts';
export default (editor, opt = {}) => {
   const c = opt;
   const bm = editor.BlockManager;

   if (c.blocks.indexOf(lineChartRef) >= 0) {
       bm.add(lineChartRef, {
           label: c.labelLineChart,
           content: `
               <div data-gjs-type="${chartType}" id="myChart"></div>
           `
       });
   }
};

компоненты. js

import { chartType } from './consts';

export default (editor, opt = {}) => {
    const domc = editor.DomComponents;
    const defaultType = domc.getType('default');
    const defaultModel = defaultType.model;

    domc.addType(chartType, {
        model: defaultModel.extend(
            {
                defaults: {
                    ...defaultModel.prototype.defaults,
                    script: function() {
                        if (typeof zingchart == 'undefined') {
                            var script = document.createElement('script');
                            script.src =
                                'https://cdn.zingchart.com/zingchart.min.js';
                            document.body.appendChild(script);
                        }
                    }
                }
            },
            {
                isComponent: el => {
                    if (
                        el.getAttribute &&
                        el.getAttribute('data-gjs-type') === chartType
                    ) {
                        return {
                            type: chartType
                        };
                    }
                }
            }
        ),
        view: {
            onRender() {
                renderZingChart.bind(this)();
            }
        }
    });

    function renderZingChart() {
        const data = {
            type: 'bar',
            title: {
                text: 'Data Basics',
                fontSize: 24
            },
            legend: {
                draggable: true
            },
            scaleX: {
                // Set scale label
                label: { text: 'Days' },
                // Convert text on scale indices
                labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            scaleY: {
                label: { text: 'Temperature (°F)' }
            },
            plot: {
                animation: {
                    effect: 'ANIMATION_EXPAND_BOTTOM',
                    method: 'ANIMATION_STRONG_EASE_OUT',
                    sequence: 'ANIMATION_BY_NODE',
                    speed: 275
                }
            },
            series: [
                {
                    // plot 1 values, linear data
                    values: [23, 20, 27, 29, 25, 17, 15],
                    text: 'Week 1'
                },
                {
                    // plot 2 values, linear data
                    values: [35, 42, 33, 49, 35, 47, 35],
                    text: 'Week 2'
                },
                {
                    // plot 2 values, linear data
                    values: [15, 22, 13, 33, 44, 27, 31],
                    text: 'Week 3'
                }
            ]
        };
        const chart = {
            id: 'myChart',
            data
        };

        zingchart.render(chart);
    }
};

index. js

import grapesjs from 'grapesjs';
import loadBlocks from './blocks';
import loadComponents from './components';
import { lineChartRef } from './consts';

export default grapesjs.plugins.add('fndy-charts', (editor, opts = {}) => {
    let c = opts;

    let defaults = {
        blocks: [lineChartRef],
        defaultStyle: 1,
        labelLineChart: 'Line Chart'
    };

    // Load defaults
    for (let name in defaults) {
        if (!(name in c)) c[name] = defaults[name];
    }

    loadBlocks(editor, c);
    loadComponents(editor, c);
});

consts. js

export const lineChartRef = 'line-chart';
export const chartType = 'chart';

Когда я добавляю блок на холст, он рендерится, а внутри ZingChart нет. Некоторые вещи, которые я уже пробовал:

  1. Убедитесь, что вызывается функция рендеринга ZingChart.
  2. Попробуйте переместить вызов функции renderZingChart к различным хукам компонентов. В частности, component: mount, view.init () и view.onRender ().
  3. Переместите вызов функции renderZingChart в функцию сценария как обратный вызов script.onload. Подобный пример можно найти здесь: https://grapesjs.com/docs/modules/Components-js.html#basic -scripts . Это действительно корректно отображает ZingChart, но не позволяет корректно передать параметры, поскольку функция скрипта работает вне области действия Grapes Js.

У меня заканчиваются идеи, поэтому любое руководство было бы замечательно! Спасибо!

Ответы [ 2 ]

1 голос
/ 04 февраля 2020

Я делаю библиотеку компонентов диаграммы с диаграммами, и подход к отображению диаграммы будет аналогичным. Единственное, чего я не вижу, это элемента id. Это атрибут, который zing использует для визуализации диаграммы.

Я сделал небольшой пример, который явно не готов к производству, потому что идентификатор блока - stati c. Это определенно решает проблему рендеринга, чтобы сделать id динамическим c, вы можете сделать это, прослушивая событие component:add и добавить идентификатор модели в качестве атрибута. 

const plugin = editor => {
  const {
    BlockManager: bm
  } = editor;
  bm.add("mychart", {
    label: "Chart",
    content: {
      tagName: "div",
      attributes: {
        id: 'myChart'
      },
      style: {
        width: "300px",
        height: "300px"
      },
      script: function() {
        const init = () => {
          const data = {
            type: "bar",
            title: {
              text: "Data Basics",
              fontSize: 24
            },
            legend: {
              draggable: true
            },
            scaleX: {
              // Set scale label
              label: {
                text: "Days"
              },
              // Convert text on scale indices
              labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
            },
            scaleY: {
              label: {
                text: "Temperature (°F)"
              }
            },
            plot: {
              animation: {
                effect: "ANIMATION_EXPAND_BOTTOM",
                method: "ANIMATION_STRONG_EASE_OUT",
                sequence: "ANIMATION_BY_NODE",
                speed: 275
              }
            },
            series: [{
                // plot 1 values, linear data
                values: [23, 20, 27, 29, 25, 17, 15],
                text: "Week 1"
              },
              {
                // plot 2 values, linear data
                values: [35, 42, 33, 49, 35, 47, 35],
                text: "Week 2"
              },
              {
                // plot 2 values, linear data
                values: [15, 22, 13, 33, 44, 27, 31],
                text: "Week 3"
              }
            ]
          };
          const chart = {
            id: this.id,
            data
          };

          zingchart.render(chart);
        };
        if (typeof zingchart == "undefined") {
          var script = document.createElement("script");
          script.onload = init;
          script.src = "https://cdn.zingchart.com/zingchart.min.js";
          document.body.appendChild(script);
        } else {
          init();
        }
      }
    }
  });
};
const editor = grapesjs.init({
  container: "#gjs",
  fromElement: true,
  height: "100vh",
  width: "auto",
  storageManager: false,
  panels: {
    defaults: []
  },
  plugins: ["gjs-preset-webpage", plugin]
});

Здесь вы можете проверить чек на графике. Codepen

Надеюсь, хватит, ура!

0 голосов
/ 23 марта 2020

Я не думаю, что вам нужно писать очень сложный код для использования диаграмм Zing. Я добавлю небольшой пример кода для создания элемента блока диаграммы, поэтому, когда вы перетаскиваете элемент блока, он сделает диаграмму часть g js div винограда js. Я использую Highcharts. 

editor.BlockManager.add('Blockhighcharts', {
    label: 'Highchart',
    category: 'CHART',
    attributes: { class:'gjs-fonts gjs-f-b1' },
    content: {
    script: function () {
var container = "container"+Math.floor(Math.random() * 100);
$(this).attr("id",container);    
$('#gridly_div').append($(this));
    var myChart = Highcharts.chart(container, {
        chart: {
            type: 'bar',
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });

Код HTML, где будет отображаться диаграмма, выглядит следующим образом. 

 <div id="gjs" style="height:0px; overflow:hidden;">
  <style>
    #gjs{
      height:  100%;
      width: 100%;
      margin: 0;
    }
  </style>
<div id='gridly_div' class="gridly">
</div>

...