broadlistening-viewer 0.2.0

data/README.md

@@ -0,0 +1,108 @@
+# Broadlistening Ruby Viewer
+
+[日本語版 README](./README.ja.md)
+
+A standalone tool to visualize Broadlistening analysis JSON files.
+
+It supports two usage modes:
+
+1. Static site (ruby.wasm): drag and drop JSON in the browser and view charts
+2. HTML generation (`exe/broadlistening-viewer`): generate a single self-contained HTML file from JSON on the command line
+
+The JavaScript sources are shared with `decidim-broadlistening-view`.
+
+## Setup
+
+```bash
+pnpm install
+bundle install
+```
+
+## Static Site (ruby.wasm)
+
+Uses ruby.wasm in the browser to load JSON files and render visualizations. The output can be deployed to static hosting platforms such as GitHub Pages or Cloudflare Pages.
+
+### Build
+
+```bash
+pnpm run build:site
+```
+
+The following files are generated in `public/`:
+
+- `index.html` - entry point
+- `broadlistening-site.js` - bundled JavaScript
+- `app.css` - compiled stylesheet
+- `ruby+stdlib.wasm` - ruby.wasm binary for browser runtime
+
+### Local Preview
+
+```bash
+ruby -run -e httpd public
+```
+
+Open the site in a browser, then drag and drop `hierarchical_result.json`.
+
+### Deploy
+
+Deploy the `public/` directory as-is to any static hosting service.
+
+## HTML Generation (`exe/broadlistening-viewer`)
+
+Generates a self-contained single HTML file from JSON. Plotly is bundled into the embedded JS, so output HTML size is larger than before.
+
+### Build (JS bundle)
+
+```bash
+pnpm run build:dist
+```
+
+### Generate HTML
+
+```bash
+ruby -Ilib exe/broadlistening-viewer hierarchical_result.json
+# => hierarchical_result.html is generated
+
+# Option
+ruby -Ilib exe/broadlistening-viewer input.json -o output.html --title "Title"
+```
+
+## Build Scripts
+
+| Command | Description |
+|---------|-------------|
+| `pnpm run build` | Build both site and dist outputs |
+| `pnpm run build:site` | Build JS + CSS for the static site |
+| `pnpm run build:dist` | Build JS + CSS bundle for `exe/broadlistening-viewer` |
+
+## Directory Structure
+
+```
+├── broadlistening-viewer.gemspec  # gem specification
+├── lib/
+│   └── broadlistening/
+│       └── viewer/
+│           ├── renderer.rb        # Broadlistening::Viewer::Renderer class
+│           ├── version.rb         # version constant
+│           └── assets/            # core shared assets (build output + templates)
+│               ├── template.html.erb
+│               ├── broadlistening-view.js  # built by pnpm run build:dist:js
+│               ├── app.css                 # built by pnpm run build:dist:css
+│               └── i18n/
+│                   └── ja.json    # Japanese messages
+├── exe/
+│   └── broadlistening-viewer      # CLI executable
+├── js/                   # JS/CSS sources (shared with decidim-broadlistening-view)
+│   ├── entrypoint.js
+│   ├── chart_manager.js
+│   ├── scatter_chart.js
+│   ├── treemap_chart.js
+│   ├── plotly_shim.js    # standalone shim returning Plotly from npm package
+│   ├── app.css
+│   └── ...
+├── site/
+│   └── entrypoint_site.js  # entry point for static site (ruby.wasm)
+├── public/               # static site build output + index.html + ruby+stdlib.wasm
+├── build.mjs             # esbuild configuration
+└── package.json
+```

data/exe/broadlistening-viewer

@@ -0,0 +1,20 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require "optparse"
+require_relative "../lib/broadlistening/viewer/renderer"
+
+options = { title: "分析結果", output: nil }
+OptionParser.new do |opts|
+  opts.banner = "Usage: broadlistening-viewer INPUT_JSON [-o OUTPUT] [--title TITLE]"
+  opts.on("-o", "--output FILE") { |v| options[:output] = v }
+  opts.on("--title TITLE") { |v| options[:title] = v }
+end.parse!
+
+input_file = ARGV[0] or abort("Usage: broadlistening-viewer INPUT_JSON [-o OUTPUT] [--title TITLE]")
+output_file = options[:output] || "report.html"
+
+json_str = File.read(input_file)
+renderer = Broadlistening::Viewer::Renderer.new(title: options[:title])
+renderer.save(json_str, output_file)
+puts "Generated: #{output_file}"

data/js/shared/blv.css

@@ -0,0 +1,102 @@
+/* Plotly modebar: undo Tailwind preflight interference */
+.modebar-container svg {
+  display: inline-block;
+}
+
+.modebar-btn {
+  line-height: 0;
+}
+
+/* Segment button active state (classList.toggle) */
+.blv-active {
+  background: #fff;
+  color: #111827;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.blv-segment-btn:hover:not(.blv-active):not(:disabled) {
+  color: #374151;
+  background: rgba(255, 255, 255, 0.5);
+}
+
+/* Settings dialog (a11y-dialog-component integration) */
+.blv-settings-dialog {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10000;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.blv-settings-dialog[aria-hidden="false"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.blv-settings-dialog .blv-settings-dialog__container {
+  display: block;
+}
+
+/* Slider range input styling */
+.blv-slider input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  background: #e5e7eb;
+  border-radius: 3px;
+  outline: none;
+  cursor: pointer;
+}
+
+.blv-slider input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  background: #0284c7;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.15s ease;
+}
+
+.blv-slider input[type="range"]::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+}
+
+.blv-slider input[type="range"]::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  background: #0284c7;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.15s ease;
+}
+
+.blv-slider input[type="range"]::-moz-range-thumb:hover {
+  transform: scale(1.1);
+}
+
+.blv-slider input[type="range"]:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.3);
+}
+
+.blv-slider input[type="range"]:focus::-moz-range-thumb {
+  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.3);
+}
+
+/* Cluster card selection states */
+.blv-cluster-card--selected {
+  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.4) !important;
+  transform: scale(1.02);
+}
+
+.blv-cluster-card--in-path {
+  opacity: 0.7;
+}