# ai-builder/2.1.3/assets/js/src/editor-blocks/stat-bar/index.js

AI Builder – Generate pages, blocks, images & translate with AI, version 2.1.3. 86 lines.

- Page: https://pluginprobe.com/plugins/ai-builder/2.1.3/code/assets/js/src/editor-blocks/stat-bar/index.js
- Raw: https://pluginprobe.com/plugins/ai-builder/2.1.3/raw/assets/js/src/editor-blocks/stat-bar/index.js
- Modified: 2025-08-23T08:19:58+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ai-builder/2.1.3/code/assets/js/src/editor-blocks/stat-bar/index.js#L10-L20`.

```javascript
import { __ } from "@wordpress/i18n";
import { registerBlockType } from "@wordpress/blocks";
import { InspectorControls, PanelColorSettings } from "@wordpress/block-editor";
import { PanelBody, RangeControl, TextControl } from "@wordpress/components";
import "./stat-bar.css";

registerBlockType("ai-builder/stat-bar", {
  title: __("Stat Bar", "ai-builder"),
  icon: "chart-bar",
  category: "widgets",
  attributes: {
    value: {
      type: "number",
      default: 75,
    },
    color: {
      type: "string",
      default: "#2563eb",
    },
    label: {
      type: "string",
      default: "75%",
    },
  },
  edit: ({ attributes, setAttributes }) => {
    const { value, color, label } = attributes;
    return (
      <div className="ai-stat-bar-editor">
        <InspectorControls>
          <PanelBody title={__("Stat Bar Settings", "ai-builder")}>
            <RangeControl
              label={__("Value (%)", "ai-builder")}
              value={value}
              onChange={(val) => {
                setAttributes({ value: val, label: `${val}%` });
              }}
              min={0}
              max={100}
            />
            <TextControl
              label={__("Label", "ai-builder")}
              value={label}
              onChange={(val) => setAttributes({ label: val })}
            />
          </PanelBody>
          <PanelColorSettings
            title={__("Bar Color", "ai-builder")}
            colorSettings={[
              {
                value: color,
                onChange: (val) => setAttributes({ color: val }),
                label: __("Bar Color", "ai-builder"),
              },
            ]}
          />
        </InspectorControls>
        <div className="ai-stat-bar-preview">
          <div className="ai-stat-bar-track" style={{ background: "#e5e7eb" }}>
            <div
              className="ai-stat-bar-fill"
              style={{ width: `${value}%`, background: color }}
            >
              <span className="ai-stat-bar-label">{label}</span>
            </div>
          </div>
        </div>
      </div>
    );
  },
  save: ({ attributes }) => {
    const { value, color, label } = attributes;
    return (
      <div className="ai-stat-bar-frontend">
        <div className="ai-stat-bar-track" style={{ background: "#e5e7eb" }}>
          <div
            className="ai-stat-bar-fill"
            style={{ width: `${value}%`, background: color }}
          >
            <span className="ai-stat-bar-label">{label}</span>
          </div>
        </div>
      </div>
    );
  },
});

```