Package Exports

berles-boolean-skill-map

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (berles-boolean-skill-map) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

berles-boolean-skill-map

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
💻