package charts

import (
	"fmt"
	"os"
)

func ExampleBar() {
	mu := NewBar(
		BarValue{
			Label: "label: 101",
			Value: 101,
		},
		BarValue{
			Label: "label: -09",
			Value: -99,
		},
		BarValue{
			Label: "label: 201",
			Value: 201,
		},
		BarValue{
			Label: "label: -199",
			Value: -199,
		},
		BarValue{
			Label: "label: 301",
			Value: 301,
		},
		BarValue{
			Label: "label: -299",
			Value: -299,
		},
		BarValue{
			Label: "label: 401",
			Value: 401,
		},
		BarValue{
			Label: "label: -399",
			Value: -399,
		},
		BarValue{
			Label: "label: 501",
			Value: 501,
		},
		BarValue{
			Label: "label: -499",
			Value: -499,
		},
		BarValue{
			Label: "label: 601",
			Value: 601,
		},
		BarValue{
			Label: "label: -599",
			Value: -599,
		},
		BarValue{
			Label: "label: 701",
			Value: 701,
		},
		BarValue{
			Label: "label: -699",
			Value: -699,
		},
		BarValue{
			Label: "label: 801",
			Value: 801,
		},
		BarValue{
			Label: "label: -799",
			Value: -799,
		},
		BarValue{
			Label: "label: 901",
			Value: 901,
		},
		BarValue{
			Label: "label: -899",
			Value: -899,
		},
		BarValue{
			Label: "label: 1001",
			Value: 1001,
		},
		BarValue{
			Label: "label: -999",
			Value: -999,
		},
	).SVG().GetMarkup()

	os.WriteFile("./test.svg", []byte(mu), 666)
	fmt.Println(mu)
	// Output: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="border-width: 2px; height: auto; padding: 1em; width: 100%" viewBox="0 0 100 100" class="rounded-lg border-border"><rect x="0.125" y="45" width="4.75" height="55" class="fill-accent"/><text x="2.5" y="47.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">101</text><text x="2.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 2.5 97.625)">label: 101</text><rect x="5.125" y="55" width="4.75" height="45" class="fill-accent"/><text x="7.5" y="57.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">-99</text><text x="7.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 7.5 97.625)">label: -09</text><rect x="10.125" y="40" width="4.75" height="60" class="fill-accent"/><text x="12.5" y="42.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">201</text><text x="12.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 12.5 97.625)">label: 201</text><rect x="15.125" y="60" width="4.75" height="40" class="fill-accent"/><text x="17.5" y="62.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">-199</text><text x="17.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 17.5 97.625)">label: -199</text><rect x="20.125" y="35" width="4.75" height="65" class="fill-accent"/><text x="22.5" y="37.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">301</text><text x="22.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 22.5 97.625)">label: 301</text><rect x="25.125" y="65" width="4.75" height="35" class="fill-accent"/><text x="27.5" y="67.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">-299</text><text x="27.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 27.5 97.625)">label: -299</text><rect x="30.125" y="30" width="4.75" height="70" class="fill-accent"/><text x="32.5" y="32.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">401</text><text x="32.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 32.5 97.625)">label: 401</text><rect x="35.125" y="70" width="4.75" height="30" class="fill-accent"/><text x="37.5" y="72.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">-399</text><text x="37.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 37.5 97.625)">label: -399</text><rect x="40.125" y="25" width="4.75" height="75" class="fill-accent"/><text x="42.5" y="27.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">501</text><text x="42.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 42.5 97.625)">label: 501</text><rect x="45.125" y="75" width="4.75" height="25" class="fill-accent"/><text x="47.5" y="77.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">-499</text><text x="47.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 47.5 97.625)">label: -499</text><rect x="50.125" y="20" width="4.75" height="80" class="fill-accent"/><text x="52.5" y="22.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">601</text><text x="52.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 52.5 97.625)">label: 601</text><rect x="55.125" y="80" width="4.75" height="20" class="fill-accent"/><text x="57.5" y="82.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">-599</text><text x="57.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 57.5 97.625)">label: -599</text><rect x="60.125" y="15" width="4.75" height="85" class="fill-accent"/><text x="62.5" y="17.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">701</text><text x="62.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 62.5 97.625)">label: 701</text><rect x="65.125" y="85" width="4.75" height="15" class="fill-accent"/><text x="67.5" y="87.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">-699</text><text x="67.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 67.5 97.625)">label: -699</text><rect x="70.125" y="10" width="4.75" height="90" class="fill-accent"/><text x="72.5" y="12.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">801</text><text x="72.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 72.5 97.625)">label: 801</text><rect x="75.125" y="90" width="4.75" height="10" class="fill-accent"/><text x="77.5" y="92.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">-799</text><text x="77.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 77.5 97.625)">label: -799</text><rect x="80.125" y="5" width="4.75" height="95" class="fill-accent"/><text x="82.5" y="7.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">901</text><text x="82.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 82.5 97.625)">label: 901</text><rect x="85.125" y="95" width="4.75" height="5" class="fill-accent"/><text x="87.5" y="97.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">-899</text><text x="87.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 87.5 97.625)">label: -899</text><rect x="90.125" y="0" width="4.75" height="100" class="fill-accent"/><text x="92.5" y="2.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">1001</text><text x="92.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 92.5 97.625)">label: 1001</text><rect x="95.125" y="100" width="4.75" height="0" class="fill-accent"/><text x="97.5" y="102.375" fill="var(--accent-foreground)" text-anchor="middle" style="font-size: 2.375px">-999</text><text x="97.5" y="97.625" fill="var(--accent-foreground)" style="font-size: 2.375px" dominant-baseline="central" transform="rotate(-90 97.5 97.625)">label: -999</text></svg>
}