Custom Renderer (Bar)

You can use a custom renderer to create a horizontal bar shape.

This is an example of applying a custom renderer to the "Unit" column so that the renderer flows horizontally to other columns and is displayed.

Note

Using a custom renderer means that the developer directly controls the grid without using its functions. Therefore, it is not basically a technical support area.
However, if there is a problem with the code you wrote, you must send us the executable source code to receive technical support.
The custom renderer was developed for view purposes and is not suitable for input purposes.
Since it was not developed with the idea of being able to draw the entire thing using external components, there may be problems if you draw an area larger than the row height.

//mineral 광물컬럼
gridView.registerCustomRenderer("mineral", {
  initContent : function (dom) {
      let css = dom.style;
      css.display = "flex";
      css.flexDirection = "row";
      css.marginRight = "5px";
      css.alignItems = "center";
 
      const textSpan = this._textSpan = document.createElement("span");
      css = textSpan.style;
      css.flex = "1 1 20px";
      const colorSpan = this._colorSpan = document.createElement("span");
      
      colorSpan.classList.add("dot");
      css = colorSpan.style;
      css.flex = "0 0 10px";
      
      dom.appendChild(this._textSpan);
      dom.appendChild(this._colorSpan);
  },
  
  canClick : function() {
      return true;
  },
  
  clearContent : function(dom) {
 
  },
  
  render : function(grid, model, width, height, info) {
      const itemIndex = model.item.index
      const mineral = grid.getValue(itemIndex, "mineral");
      this._textSpan.textContent = mineral;
      this._colorSpan.style.backgroundColor = colorCode[mineral];
  },
  
  click : function(event) {
      
  }
});
 
//unit 단위컬럼
gridView.registerCustomRenderer("mineralBar", {
  initContent : function (dom) {
      this._dom = dom;
      let css = dom.style;
      css.display = "flex";
      css.height = "21px";
      css.alignItems = "center";
 
      dom.style.removeProperty("overflow");
      const svg = this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      css = svg.style;
      css.position = "absolute";
      dom.appendChild(svg);
 
      const text = this.textSpan = document.createElement("span");
      css = text.style;
      css.flex = "1 1 20px";
      css.position = "relative";
      dom.appendChild(text);
  },
  
  canClick : function() {
      return true;
  },
  
  clearContent : function(dom) {
      dom.removeChild(this.svg);
  },
  
  render : function(grid, model, colWidth, height, info) {
      const svg = this.svg;
    const widths = grid._view.activeCellLayout._cellWidths;
    let width = widths.reduce( (a, b) => a + b, 0);
    width -= (grid.layoutByName("mineral").cellWidth + grid.layoutByName("합계").cellWidth);
 
    svg.setAttribute("width", `${width}`);
    svg.setAttribute("height", "16");
    svg.setAttribute("viewBox", `0 0 ${width} 16`)
 
    this.textSpan.textContent = model.value;
 
    const ds = grid.getDataSource();
    //this.dom.style.removeProperty("overflow");
    const mineral = ds.getValue(model.index.dataRow, "mineral")
    const color = colorCode[mineral] || "silver";
    const volume = ds.getValue(model.index.dataRow, "합계") || 0;
    if (volume <= 0) {
        this.svg.innerHTML = "";
    } else if (volume <= 600000) { // 대략 70%
        let barWidth = (volume / 500000) * 0.7 * width;
        this.svg.innerHTML = `<path d="M0 0 H${barWidth} A8 8 0 0 1 ${barWidth} 16 H0 Z" fill=${color} />`;
    } else {
        let barWidth = Math.min( 0.7 * width + (((volume - 500000) / 3000000) * width), width - 10);
        // let barWidth = Math.min((volume / 500000) * width, width - 10);
        let str = `
            <defs>
                <!-- 마스크 정의: 전체는 보이게, 번개 선은 가리기 -->
                <mask id="mask-transparent-stroke">
                <!-- 전체 흰색 (보임) -->
                <rect width=${width} height="16" fill="white" />
                <!-- 번개 선 부분은 검정색 (가려짐 = 투명) -->
                <path d="M700 0 L695 5 L700 10 L695 15" stroke="black" stroke-width="2" fill="none" />
                </mask>
            </defs>
            <path d="M0 0 H${barWidth} A8 8 0 0 1 ${barWidth} 16 H0 Z" fill=${color} mask="url(#mask-transparent-stroke)"/>`;
        this.svg.innerHTML = str;
    }
  
  },
  
  click : function(event) {
      
  }
});
 
gridView.columnByName("mineral").renderer = "mineral";
gridView.columnByName("unit").renderer = "mineralBar";

class Custom Renderer series column