{"version":3,"file":"MortgageRatesChart.js","sources":["../../../resources/js/components/charts/MortgageRatesChart.vue?vue&type=template&lang.js","../../../resources/js/components/charts/MortgageRatesChart.vue"],"sourcesContent":["\n<div class=\"position-relative\">\n    <loader :visible=\"loading\"></loader>\n    <div id=\"chart\" v-if=\"showRates\">\n        <div class=\"toolbar d-flex\">\n            <button\n                v-for=\"(label, key) in timelineLabels\"\n                :key=\"key\"\n                @click=\"updateData(key)\"\n                class=\"btn btn-sm w-full btn-block btn-primary me-2 share-button has-tooltip\"\n                :class=\"{ active: selection === key }\"\n            >\n                {{ label }}\n            </button>\n        </div>\n\n        <div id=\"chart-timeline\" style=\"min-height: 350px\">\n            <VueApexCharts type=\"area\" height=\"350\" ref=\"chart\" :options=\"chartOptions\" :series=\"mortgageRates\" />\n        </div>\n    </div>\n</div>\n","<template>\n    <div class=\"position-relative\">\n        <loader :visible=\"loading\"></loader>\n        <div id=\"chart\" v-if=\"showRates\">\n            <div class=\"toolbar d-flex\">\n                <button\n                    v-for=\"(label, key) in timelineLabels\"\n                    :key=\"key\"\n                    @click=\"updateData(key)\"\n                    class=\"btn btn-sm w-full btn-block btn-primary me-2 share-button has-tooltip\"\n                    :class=\"{ active: selection === key }\"\n                >\n                    {{ label }}\n                </button>\n            </div>\n\n            <div id=\"chart-timeline\" style=\"min-height: 350px\">\n                <VueApexCharts type=\"area\" height=\"350\" ref=\"chart\" :options=\"chartOptions\" :series=\"mortgageRates\" />\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { mapGetters } from 'vuex';\nimport { fetchMortgageRates } from '@/api/search';\nimport dayjs from 'dayjs';\nimport VueApexCharts from 'vue-apexcharts';\nimport Loader from '@/components/Loader.vue';\n\nexport default {\n    components: {\n        VueApexCharts,\n        Loader\n    },\n    props: {\n        show: {\n            type: Boolean,\n            default: true\n        }\n    },\n    data() {\n        return {\n            mortgageRates: [],\n            dates: [],\n            all_rates: [],\n            loading: false,\n            date_set: null,\n            start_date: null,\n            end_date: null,\n            showRates: this.show,\n            timelineLabels: {\n                one_month: '1M',\n                six_months: '6M',\n                one_year: '1Y',\n                ytd: 'YTD',\n                all: 'ALL'\n            }\n        };\n    },\n    computed: {\n        ...mapGetters({\n            colorMode: 'user/colorMode'\n        }),\n        chartOptions() {\n            return {\n                chart: {\n                    type: 'area',\n                    height: 450,\n                    zoom: {\n                        enabled: true,\n                        type: 'x',\n                        autoScaleYaxis: true\n                    },\n                    toolbar: {\n                        show: false\n                    },\n                    animations: {\n                        enabled: true,\n                        easing: 'easeinout',\n                        speed: 800\n                    }\n                },\n                dataLabels: {\n                    enabled: false\n                },\n                stroke: {\n                    curve: 'smooth',\n                    width: 2\n                },\n                legend: {\n                    position: 'top',\n                    horizontalAlign: 'left'\n                },\n                xaxis: {\n                    type: 'datetime',\n                    labels: {\n                        datetimeFormatter: {\n                            year: 'yyyy',\n                            month: \"MMM 'yy\",\n                            day: 'dd MMM'\n                        }\n                    }\n                },\n                yaxis: {\n                    labels: {\n                        formatter: (value) => value.toFixed(2) + '%'\n                    },\n                    title: {\n                        text: 'Rate (%)'\n                    }\n                },\n                tooltip: {\n                    shared: true,\n                    x: {\n                        format: 'MMM dd, yyyy'\n                    },\n                    y: {\n                        formatter: (value) => value.toFixed(2) + '%'\n                    }\n                },\n                theme: {\n                    mode: this.colorMode\n                }\n            };\n        },\n        selection: {\n            get() {\n                return this.date_set ?? 'one_year';\n            },\n            set(select) {\n                this.date_set = select;\n            }\n        },\n        start: {\n            get() {\n                return this.start_date ?? '2010-03-17';\n            },\n            set(select) {\n                this.start_date = select;\n            }\n        },\n        end: {\n            get() {\n                const lastFriday = new Date();\n                console.log(lastFriday);\n                return this.end_date ?? dayjs(lastFriday).format('YYYY-MM-DD');\n            },\n            set(select) {\n                this.end_date = select;\n            }\n        }\n    },\n    mounted() {\n        if (this.showRates) {\n            this.getMortgageRates();\n        }\n    },\n    methods: {\n        toggleShow() {\n            this.getMortgageRates();\n            this.showRates = true;\n        },\n        async getMortgageRates() {\n            try {\n                this.loading = true;\n                const response = await fetchMortgageRates(this.start, this.end);\n\n                // Sort the response by date\n                response.sort((a, b) => new Date(a.mortgage_date) - new Date(b.mortgage_date));\n\n                this.dates = response.map(({ mortgage_date }) => mortgage_date);\n\n                let fixed_30 = response.map((v) => [new Date(v.mortgage_date).getTime(), v.fixed_30]).filter(([date, rate]) => date && rate !== null && !isNaN(rate));\n                let fixed_15 = response.map((v) => [new Date(v.mortgage_date).getTime(), v.fixed_15]).filter(([date, rate]) => date && rate !== null && !isNaN(rate));\n\n                this.all_rates = [...fixed_30, ...fixed_15];\n\n                this.mortgageRates = [\n                    {\n                        name: '30-Yr FRM',\n                        type: 'area',\n                        data: fixed_30\n                    },\n                    {\n                        name: '15-Yr FRM',\n                        type: 'area',\n                        data: fixed_15\n                    }\n                ];\n\n                // Set initial view to one year\n                this.$nextTick(() => {\n                    this.updateData('one_year');\n                });\n            } catch (e) {\n                console.error('Error fetching mortgage rates:', e);\n            } finally {\n                this.loading = false;\n            }\n        },\n        updateData(timeline) {\n            this.selection = timeline;\n            if (!this.$refs.chart) {\n                console.warn('Chart reference not available');\n                return;\n            }\n\n            const chart = this.$refs.chart.chart;\n            let startDate,\n                endDate = new Date(Math.max(...this.dates.map((d) => new Date(d))));\n\n            switch (timeline) {\n                case 'one_month':\n                    startDate = new Date(endDate.getTime() - 30 * 24 * 60 * 60 * 1000);\n                    break;\n                case 'six_months':\n                    startDate = new Date(endDate.getTime() - 180 * 24 * 60 * 60 * 1000);\n                    break;\n                case 'one_year':\n                    startDate = new Date(endDate.getTime() - 365 * 24 * 60 * 60 * 1000);\n                    break;\n                case 'ytd':\n                    startDate = new Date(endDate.getFullYear(), 0, 1);\n                    break;\n                case 'all':\n                    startDate = new Date(Math.min(...this.dates.map((d) => new Date(d))));\n                    break;\n                default:\n                    startDate = new Date(endDate.getTime() - 365 * 24 * 60 * 60 * 1000);\n            }\n\n            chart.zoomX(startDate.getTime(), endDate.getTime());\n            console.log(`Zoomed to: ${startDate.toISOString()} - ${endDate.toISOString()}`);\n        }\n    }\n};\n</script>\n"],"names":["render","_vm","_h","_c","label","key","$event","staticRenderFns","__vue2_script","VueApexCharts","Loader","mapGetters","value","_a","select","lastFriday","dayjs","response","fetchMortgageRates","a","b","mortgage_date","fixed_30","v","date","rate","fixed_15","e","timeline","chart","startDate","endDate","d"],"mappings":"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"}