{"spec_id":"datamatrix-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// datamatrix-basic: Basic Data Matrix 2D Barcode\n// Library: echarts 6.1.0 | JavaScript 22.23.2\n// Quality: 91/100 | Created: 2026-09-02\n//# anyplot-orientation: square\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// ISO/IEC 16022 Data Matrix layout: a solid L-shaped finder pattern runs the\n// full left column + bottom row for orientation lock, and an alternating\n// \"clock track\" runs the top row + right column as a module-size reference.\n// Everything inside that border is the ECC 200 encoded payload. No barcode\n// encoder is available in the browser sandbox, so the interior is filled with\n// a deterministic pseudo-random pattern seeded from the payload string — a\n// faithful stand-in for the visual density of encoded data, not a scannable\n// symbol.\nconst content = \"PART:TRQ-4471/LOT:2609A\";\nconst symbolSize = 20; // modules per side of the encoded symbol (even, per ISO 16022)\nconst quietZone = 2; // modules of clear space required on every side\nconst gridSize = symbolSize + quietZone * 2;\n\nconst mulberry32 = (seed) => () => {\n  seed = (seed + 0x6d2b79f5) | 0;\n  let x = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n  x = (x + Math.imul(x ^ (x >>> 7), 61 | x)) ^ x;\n  return ((x ^ (x >>> 14)) >>> 0) / 4294967296;\n};\nlet seed = 42;\nfor (let i = 0; i < content.length; i += 1) {\n  seed = (seed * 31 + content.charCodeAt(i)) >>> 0;\n}\nconst rand = mulberry32(seed);\n\nconst indices = Array.from({ length: gridSize }, (_, i) => String(i));\n// Structural modules (finder + timing pattern) are the fixed orientation/\n// reference border; payload modules are the ECC 200 stand-in interior. Split\n// into two groups so structure and data read as visually distinct regions.\nconst structuralModules = [];\nconst payloadModules = [];\nfor (let row = 0; row < gridSize; row += 1) {\n  for (let col = 0; col < gridSize; col += 1) {\n    const sRow = row - quietZone;\n    const sCol = col - quietZone;\n    const inSymbol = sRow >= 0 && sRow < symbolSize && sCol >= 0 && sCol < symbolSize;\n    if (!inSymbol) continue; // quiet zone stays blank (page background)\n\n    const onLeftFinder = sCol === 0;\n    const onBottomFinder = sRow === 0;\n    const onTopTiming = sRow === symbolSize - 1;\n    const onRightTiming = sCol === symbolSize - 1;\n    const onStructure = onLeftFinder || onBottomFinder || onTopTiming || onRightTiming;\n\n    let dark;\n    if (onLeftFinder || onBottomFinder) {\n      dark = true; // solid L-shaped finder pattern\n    } else if (onTopTiming || onRightTiming) {\n      dark = (sRow + sCol) % 2 === 0; // alternating clock/timing pattern\n    } else {\n      dark = rand() < 0.5; // ECC 200 payload stand-in\n    }\n    if (!dark) continue;\n    (onStructure ? structuralModules : payloadModules).push([String(col), String(row)]);\n  }\n}\n\n// --- Init ---------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option ---------------------------------------------------------------\nchart.setOption({\n  animation: false,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"datamatrix-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 40,\n    textStyle: { color: t.ink, fontSize: 22, fontWeight: 500 },\n  },\n  grid: { left: \"center\", top: 170, width: 900, height: 900 },\n  xAxis: {\n    type: \"category\",\n    data: indices,\n    axisLine: { show: false },\n    axisTick: { show: false },\n    axisLabel: { show: false },\n    splitLine: { show: false },\n  },\n  yAxis: {\n    type: \"category\",\n    data: indices,\n    axisLine: { show: false },\n    axisTick: { show: false },\n    axisLabel: { show: false },\n    splitLine: { show: false },\n  },\n  series: [\n    {\n      // Finder + timing pattern (fixed orientation/reference border) render\n      // in the Imprint brand green (palette[0]), a theme-independent accent\n      // that gives the reader a visual hierarchy cue distinguishing the\n      // symbol's structural chrome from its encoded payload.\n      type: \"custom\",\n      coordinateSystem: \"cartesian2d\",\n      data: structuralModules,\n      renderItem: (params, api) => {\n        const center = api.coord([api.value(0), api.value(1)]);\n        const size = api.size([1, 1]);\n        return {\n          type: \"rect\",\n          shape: {\n            x: center[0] - size[0] / 2,\n            y: center[1] - size[1] / 2,\n            width: size[0],\n            height: size[1],\n          },\n          style: { fill: t.palette[0] },\n          silent: true,\n        };\n      },\n      z: 1,\n    },\n    {\n      // Payload modules stay in ink/page-background: the spec mandates\n      // \"high contrast black on white for maximum readability\" for the\n      // encoded ECC 200 data region.\n      type: \"custom\",\n      coordinateSystem: \"cartesian2d\",\n      data: payloadModules,\n      renderItem: (params, api) => {\n        const center = api.coord([api.value(0), api.value(1)]);\n        const size = api.size([1, 1]);\n        return {\n          type: \"rect\",\n          shape: {\n            x: center[0] - size[0] / 2,\n            y: center[1] - size[1] / 2,\n            width: size[0],\n            height: size[1],\n          },\n          style: { fill: t.ink },\n          silent: true,\n        };\n      },\n      z: 1,\n    },\n  ],\n});\n\nchart.on(\"finished\", () => {\n  window.__anyplotReady = true;\n});\n"}