# Panel 5: Customize
# The following Notion provides an Overview and details on Workflows: https://www.notion.so/Line-Chart-User-Input-Forms-16fcae16861d80369c88c6a8a56c5ae6?pvs=4#16fcae16861d80c483f7c1e504c18c67
- scroller:
    name: "customizationOptions"
    title: Customization Options
    content:

      # Question 1: Trading Volume
      - text:
          name: secondaryVerticalAxisColumnChart
          text: >
            <p><strong>Do you want to the display the trading volume of the primary company on the chart? We can include this on the secondary axis formatted as a column chart. It can be helpful to emphasize particular changes in trading pattern for the primary company.  </strong></p>
      - grid:
          # Workflow AN1. Image Emphasis Upon Click
          # Workflow OW1.
          content:
            - imageButton:
                name: addsecondaryVerticalAxisColumnChart
                dataIndex: addsecondaryVerticalAxisColumnChart
                title: Add Trading Volume
                subtitle: Adds trading volume over time as a column chart to the secondary vertical axis
                image: /assets/line_chart/Q1_AddSecondaryVerticalAxisBarChart.png
            - imageButton:
                name: nosecondaryVerticalAxisColumnChart
                dataIndex: nosecondaryVerticalAxisColumnChart
                title: No Trading Volume
                subtitle: No trading volume data to your chart
                image: /assets/line_chart/Q1_NoIndexation.png


      # Question 2: Summary Table
      - text:
          name: summaryTable
          text: >
            <p><strong>Do you want to include a trading performance summary table on the chart? We can include this on an appropriate top corner of your chart. It can be helpful to emphasize periodic changes in share price performance.</strong></p>
      - grid:
          # Workflow AN1. Image Emphasis Upon Click
          # Workflow OW1.
          content:
            - imageButton:
                name: addsummaryTable
                dataIndex: addsummaryTable
                title: Add Sumary Table
                subtitle: Adds a summary table on select  company / indice trading performance at various points in time
                image: /assets/line_chart/Q2_AddSummaryTable.png

            - imageButton:
                name: nosummaryTable
                dataIndex: nosummaryTable
                title: No Sumary Table
                subtitle: No Summary Table added to your chart
                image: /assets/line_chart/Q2_NoSummaryTable.png


      # Question 3: Small Line Chart
      - text:
          name: smallLineChart
          text: >
            <p><strong>Do you want to include a small line chart over a selected time period to your placeholder? It can be helpful to emphasize a key time period in the primary charts trading period. And can be added to the appropriate top corner of your chart.</strong></p>
      - grid:
          # Workflow AN1. Image Emphasis Upon Click
          # Workflow OW1.
          content:
            - imageButton:
                name: addSmallLineChart
                dataIndex: addSmallLineChart
                title: Add Small Line Chart
                subtitle: Adds a small line chart on select  company / indice trading performance over specified period of time.
                image: /assets/line_chart/Q3_AddSmallLineChart.png

            - imageButton:
                name: nosmallLineChart
                dataIndex: nosmallLineChart
                title: No Small Line Chart
                subtitle: No Small Line Chart added to your chart
                image: /assets/line_chart/Q3_NoSmallLineChart.png


      # Question 4: Call Out Boxes
      - text:
          name: callOutBoxes
          text: >
            <p><strong>Do you want to include call out boxes on the chart? May be helpful to emphasize certain changes in share price at particular points in time.</strong></p>
      - grid:
          # Workflow AN1. Image Emphasis Upon Click
          # Workflow OW1.
          content:
            - imageButton:
                name: addCallOutBoxes
                dataIndex: addCallOutBoxes
                title: Add Call Out Boxes
                subtitle: Adds specified Call Out Boxes to the Line Chart.
                image: /assets/line_chart/Q4_AddCallOutBoxes.png

            - imageButton:
                name: noCallOutBoxes
                dataIndex: noCallOutBoxes
                title: No Call Out Boxes
                subtitle: No Call Out Boxes added to your chart
                image: /assets/line_chart/Q4_NoCallOutBoxes.png


      # Question 5: Background Shading
      - text:
          name: backgroundShading
          text: >
            <p><strong>Do you want to include background shading over chosen trading time periods? Can be helpful to emphasize market wide trading phenomenon's impact particular periods of the chart (such as Covid panic or an AI exuberance rally).</strong></p>
      - grid:
           # Workflow AN1. Image Emphasis Upon Click
           # Workflow OW1.
          content:
            - imageButton:
                name: addBackgroundShading
                dataIndex: addBackgroundShading
                title: Add Background Shading
                subtitle: Adds specified Background Shading to the Line Chart.
                image: /assets/line_chart/Q5_AddBackgroundShading.png

            - imageButton:
                name: noBackgroundShading
                dataIndex: noBackgroundShading
                title: No Background Shading
                subtitle: No Background Shading  added to your chart
                image: /assets/line_chart/Q5_NoBackgroundShading.png


      # Question 6: Vertical Line
      - text:
          name: verticalLine
          text: >
            <p><strong>Do you want to include vertical line(s) onto the chart? Can be helpful to emphasize certain points in time where trading behavior changes (such as a big company public announcement).</strong></p>
      - grid:
          # Workflow AN1. Image Emphasis Upon Click
          # Workflow OW1.
          content:
            - imageButton:
                name: addVerticalLine
                dataIndex: addVerticalLine
                title: Add Vertical Line
                subtitle: Add specified Vertical Line at selection Points-in-Time onto the Line Chart.
                image: /assets/line_chart/Q6_AddVerticalLine.png

            - imageButton:
                name: noVerticalLine
                dataIndex: noVerticalLine
                title: No Vertical Line
                subtitle: No Vertical Line added to your chart
                image: /assets/line_chart/Q6_NoVerticalLine.png



      # Below are now the bottom of page navigation buttons
      # Workflow NN1.
      - aligner:
          align: right
          width: auto
          content:
            - button:
                name: backBtn
                type: default
                title: Back
            # Workflow NN2.
            - button:
                name: nextBtn
                type: primary
                title: Next
            # Workflow NN1.
            - button:
                name: btnCancel
                type: default
                title: Cancel