Finish remaining sections

Accordion_Plugin.md

@@ -0,0 +1,214 @@
+# Accordion Plugin
+
+The `AccordionPlugin` adds a resizable band or region selection to your SigPlot plots.
+Unlike paired sliders, an accordion is a single control with a center line and two edges
+that can be dragged to adjust the width of the selection.  Accordions are commonly used
+to select frequency bands, time windows, or amplitude ranges.
+
+## Creating a Vertical Accordion
+
+To add an accordion, create an `AccordionPlugin` instance and add it to the plot.  Use
+`set_center` and `set_width` to position and size it in real units.  By default, the
+accordion is vertical and shades the selected region.
+
+```javascript
+var accordion = new sigplot.plugins.AccordionPlugin({
+    direction: "vertical",
+    shade_area: true
+});
+plot.add_plugin(accordion);
+accordion.set_center(500);
+accordion.set_width(100);
+```
+
+```html
+/*vue*/
+<desc>
+A sine wave with a vertical accordion selecting a frequency band
+</desc>
+
+<style>
+    #plot {
+    height: 400px;
+    width: 100%;
+    }
+</style>
+
+<template>
+    <div id='plot'>
+    </div>
+</template>
+
+<script>
+    export default {
+        mounted() {
+            var plot = new sigplot.Plot(document.getElementById('plot'), {
+                autohide_readout: true,
+                autohide_panbars: true,
+                no_legend_button: true,
+                legend: true
+            });
+            var data = [];
+            for (var i = 0; i < 1024; i++) {
+                data.push(Math.sin(2 * Math.PI * i / 128));
+            }
+            plot.overlay_array(data, {}, { name: "Signal" });
+
+            var accordion = new sigplot.plugins.AccordionPlugin({
+                direction: "vertical",
+                shade_area: true
+            });
+            plot.add_plugin(accordion);
+            accordion.set_center(500);
+            accordion.set_width(100);
+        }
+    }
+</script>
+```
+
+## Horizontal Accordion
+
+A horizontal accordion selects a range along the y-axis.  This is useful for marking
+amplitude thresholds or selecting a value band on a plot.  Set the `direction` option
+to `"horizontal"` and use `set_center` and `set_width` to control its position.
+
+```javascript
+var accordion = new sigplot.plugins.AccordionPlugin({
+    direction: "horizontal",
+    shade_area: true,
+    draw_center_line: true,
+    draw_edge_lines: true
+});
+plot.add_plugin(accordion);
+accordion.set_center(0);
+accordion.set_width(0.5);
+```
+
+```html
+/*vue*/
+<desc>
+A sine wave with a horizontal accordion selecting an amplitude range
+</desc>
+
+<style>
+    #plot2 {
+    height: 400px;
+    width: 100%;
+    }
+</style>
+
+<template>
+    <div id='plot2'>
+    </div>
+</template>
+
+<script>
+    export default {
+        mounted() {
+            var plot = new sigplot.Plot(document.getElementById('plot2'), {
+                autohide_readout: true,
+                autohide_panbars: true,
+                no_legend_button: true,
+                legend: true
+            });
+            var data = [];
+            for (var i = 0; i < 1024; i++) {
+                data.push(Math.sin(2 * Math.PI * i / 128));
+            }
+            plot.overlay_array(data, {}, { name: "Signal" });
+
+            var accordion = new sigplot.plugins.AccordionPlugin({
+                direction: "horizontal",
+                shade_area: true,
+                draw_center_line: true,
+                draw_edge_lines: true
+            });
+            plot.add_plugin(accordion);
+            accordion.set_center(0);
+            accordion.set_width(0.5);
+        }
+    }
+</script>
+```
+
+## Constrained Accordion
+
+You can constrain the minimum and maximum width of an accordion using `min_width` and
+`max_width`.  You can also prevent the user from moving or resizing it using
+`prevent_move` and `prevent_resize`.  This is useful when you want to allow adjustment
+within certain bounds.
+
+```javascript
+var accordion = new sigplot.plugins.AccordionPlugin({
+    direction: "vertical",
+    shade_area: true,
+    min_width: 50,
+    max_width: 300
+});
+plot.add_plugin(accordion);
+accordion.set_center(512);
+accordion.set_width(100);
+```
+
+```html
+/*vue*/
+<desc>
+Accordion constrained to a minimum width of 50 and maximum width of 300
+</desc>
+
+<style>
+    #plot3 {
+    height: 400px;
+    width: 100%;
+    }
+    #accordion-info {
+    padding: 10px;
+    font-family: monospace;
+    font-size: 14px;
+    color: #ccc;
+    background: #333;
+    margin-top: 5px;
+    }
+</style>
+
+<template>
+    <div>
+        <div id='plot3'></div>
+        <div id='accordion-info'>Drag the edges to resize (min: 50, max: 300)</div>
+    </div>
+</template>
+
+<script>
+    export default {
+        mounted() {
+            var plot = new sigplot.Plot(document.getElementById('plot3'), {
+                autohide_readout: true,
+                autohide_panbars: true,
+                no_legend_button: true,
+                legend: true
+            });
+            var data = [];
+            for (var i = 0; i < 1024; i++) {
+                data.push(Math.sin(2 * Math.PI * i / 128));
+            }
+            plot.overlay_array(data, {}, { name: "Signal" });
+
+            var accordion = new sigplot.plugins.AccordionPlugin({
+                direction: "vertical",
+                shade_area: true,
+                min_width: 50,
+                max_width: 300
+            });
+            plot.add_plugin(accordion);
+            accordion.set_center(512);
+            accordion.set_width(100);
+
+            accordion.addListener("accordiontag", function(evt) {
+                document.getElementById('accordion-info').textContent =
+                    "Center: " + evt.center.toFixed(2) +
+                    ", Width: " + evt.width.toFixed(2);
+            });
+        }
+    }
+</script>
+```