berles-boolean-skill-map

    0.2.2 • Public • Published

    berles-boolean-skill-map

    Build Status NPM

    D3 skills maps that represent a custom developer roadmap version of https://roadmap.sh

    Demo

    Demo available in https://booleanchile.github.io/berles-boolean-skill-map/

    Installation

    npm install berles-boolean-skill-map
    

    Usage

    This library is compatible as UMD module or ES6 module.

    UMD usage

    <body>
      <h1>Acá va el gráfico</h1>
      <div style="text-align: 'center';">
        <svg height="800" width="800">
          <g height="800" width="800" transform="translate(400,400)"></g>
        </svg>
      </div>
     
      <script src="https://unpkg.com/berles-boolean-skill-map@latest/umd/skillsMap.js"></script> 
      <script>
        const formData = {
          'Internet': [1, 1, 1, 2, 3],
          'Backend': [1, 1, 0, 0, 0],
          'Programación': [1, 1, 3, 0, 0],
          'Control Versiones': [1, 1, 2, 3, 0],
          'HTML y A11y': [1, 1, 1, 2, 3],
          'CSS': [1, 1, 1, 2, 3],
          'Javascript': [1, 1, 3, 0, 0],
          'Testing': [1, 1, 3, 0, 0],
          'Performance': [1, 1, 0, 0, 0],
          'Devops': [1, 1, 1, 0, 0],
          'Arquitectura': [1, 3, 0, 0, 0]
        };
        const skillsMapTarget = document.querySelector('svg > g');
        const onClickSegment = (segmentName, levelsData) => {
          console.log(segmentName, levelsData);
        };
        // UMD package it is available in window.skillsMap global variable
        window.SkillsMap.createSpiderChart(
          skillsMapTarget,
          formData,
          { onClickSegment }
        );
      </script> 
    </body>

    ES6 Package

    React JS Example

    import { createSpiderChart } from "berles-boolean-skill-map";
     
    function SkillsMap() {
      const chartRef = useRef();
     
      useEffect(() => {
        const formData = {
          'Internet': [1, 1, 1, 2, 3],
          'Backend': [1, 1, 0, 0, 0],
          'Programación': [1, 1, 3, 0, 0],
          'Control Versiones': [1, 1, 2, 3, 0],
          'HTML y A11y': [1, 1, 1, 2, 3],
          'CSS': [1, 1, 1, 2, 3],
          'Javascript': [1, 1, 3, 0, 0],
          'Testing': [1, 1, 3, 0, 0],
          'Performance': [1, 1, 0, 0, 0],
          'Devops': [1, 1, 1, 0, 0],
          'Arquitectura': [1, 3, 0, 0, 0]
        };
        const chartOptions = {
          onClickSegment(segmentName, levelsData) {
            ModalGenerator(segmentName, levelsData);
          },
        };
        createSpiderChart(chartRef.current, formData, chartOptions);
      }, []);
     
      return (
        <>
          <h1>Acá va el gráfico</h1>
          <div style={{ textAlign: "center" }}>
            <svg height={800} width={800}>
              <g
                ref={chartRef}
                height={800}
                width={800}
                transform={`translate(
                    ${400},
                    ${400})`}
              ></g>
            </svg>
          </div>
        </>
      );
    }
     

    Contributors


    gpincheiraa

    💻

    booleanchile

    💻

    Install

    npm i berles-boolean-skill-map

    DownloadsWeekly Downloads

    14

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    93 kB

    Total Files

    11

    Last publish

    Collaborators

    • gpincheiraa