frontend/src/lib/components/SentimentAnalysis.svelte

<script lang ='ts'>
    import {displayCompanyName} from '$lib/store';
    import InfoModal from '$lib/components/InfoModal.svelte';

    export let data;

    let sentimentList = data?.getSentimentAnalysis;
    
    let oneMonthResult = sentimentList?.at(1)?.value;
    let outlook = oneMonthResult > 5 ? 'Positive' : oneMonthResult < 5 ? 'Negative' : 'Neutral';
    let oneYearResult = sentimentList?.at(-1)?.value;

    let dashedLinePosition = {
        '0': '-mt-[80px]',
        '1': '-mt-[95px]',
        '2': '-mt-[105px]',
        '3': '-mt-[120px]',
        '4': '-mt-[125px]',
        '5': '-mt-[140px]',
        '6': '-mt-[152px]',
        '7': '-mt-[165px]',
        '8': '-mt-[178px]',
        '9': '-mt-[190px]',
        '10': '-mt-[200px]',
    }
</script>
    
    
    
    <section class="overflow-hidden text-white h-full pb-10 sm:pb-0">
        <main class="overflow-hidden ">
                        
            <div class="flex flex-row items-center">
                <label for="sentimentAnalysisInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
                    AI Sentiment Analysis
                </label>
                <InfoModal
                  title={"AI Sentiment Analysis"}
                  content={`We trained our AI model on over 1 million news stories and social media postings to analyze the news for various time periods and measure public opinion on  ${$displayCompanyName}`}
                  id={"sentimentAnalysisInfo"}
                />
            </div>

            {#if sentimentList?.length !== 0}
            

            <div class="pb-4 w-full mt-5">
                <div class="w-auto p-4 sm:p-6 bg-[#09090B] sm:bg-[#09090B] rounded-lg relative">
                  <h3 class="text-gray-300 font-medium text-sm uppercase mb-3">
                    Average Score
                  </h3>
                  <div class="flex flex-row items-center justify-between ">
                        <!--Start Big Circle-->
                        <div class="relative size-24 sm:size-28">
                        <svg class="size-full w-24 h-24 sm:w-28 sm:h-28" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
                            <!-- Background Circle -->
                            <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#303030]" stroke-width="3.5"></circle>
                            <!-- Progress Circle inside a group with rotation -->
                            <g class="origin-center -rotate-90 transform">
                            <circle cx="18" cy="18" r="16" fill="none" class="stroke-current {oneYearResult > 5 ? 'text-[#37C97D]' : oneYearResult < 5 ? 'text-[#FF2F1F]' : 'text-white'} text-opacity-[0.7]" stroke-width="3.5" stroke-dasharray="100" stroke-dashoffset={100-oneYearResult*10}></circle>
                            </g>
                        </svg>
                        <!--Start Inside Circle-->
                        <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
                            
                            <div class="relative size-[60px] sm:size-[70px] ml-auto">
                            <svg class="size-full w-[60px] h-[60px] sm:w-[70px] sm:h-[70px]" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
                                <!-- Background Circle -->
                                <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-[#303030]" stroke-width="4"></circle>
                                <!-- Progress Circle inside a group with rotation -->
                                <g class="origin-center -rotate-90 transform">
                                <circle cx="18" cy="18" r="16" fill="none" class="stroke-current {oneMonthResult > 5 ? 'text-[#37C97D]' : oneMonthResult < 5 ? 'text-[#FF2F1F]' : 'text-white'} " stroke-width="4" stroke-dasharray="100" stroke-dashoffset={100-oneMonthResult*10}></circle>
                                </g>
                            </svg>
                            <!-- Percentage Text -->
                            <div class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2">
                                <span class="text-center text-white text-xl sm:text-2xl font-semibold">
                                    {oneMonthResult}
                                </span>
                            </div>
                            </div>
                        </div>
                        <!--End Inside Circle-->
                        </div>
                        <!--End Big Circle-->
                    
                        <div class="flex flex-col items-start ml-4 sm:ml-10 mr-auto sm:-top-3 sm:relative">
                            <h3 class="hidden sm:block text-gray-300 text-[1rem] sm:text-lg font-semibold">
                                <span class="{outlook === 'Positive' ? 'text-[#10BC09]' : outlook==='Negative' ? 'text-red-500' : 'text-white'}">{outlook}</span> outlook:
                            </h3>
                            {#if oneMonthResult !== 0 && oneYearResult !== 0}
                            <span class="text-gray-200 text-sm mt-1">
                                In the past month, major news and social media rated the company {oneMonthResult > 5 ? 'positively' : oneMonthResult < 5 ? 'negatively' : 'neutral'} at {oneMonthResult} and
                                with a yearly average of {oneYearResult}.
                            </span>
                            {:else}
                            <span class="text-gray-200 text-sm mt-1">
                                Not much news coverage and discussion for {$displayCompanyName}. 
                            </span>
                            {/if}
                        </div>
                    </div>
                </div>
              </div>

              <div class="w-full">
                <div class="w-auto p-4 sm:p-6 bg-[#09090B] sm:bg-[#09090B] rounded-lg relative">
                    <h3 class="text-gray-300 font-medium text-sm uppercase mb-3">
                        Average Score Trend
                      </h3>
                    <div class="grid grid-cols-8 sm:grid-cols-9 -ml-2 sm:-ml-5 mt-7">
                            {#each sentimentList as item}
                            <div class="flex flex-col items-center">
                                <span class="text-white font-medium text-[1rem] mb-4">
                                    {#if data?.user?.tier === 'Pro'}
                                    {item?.value !== 0 ? item?.value : '-'}
                                    {:else if ['1M','1Y']?.includes(item?.label)}
                                        {item?.value}
                                    {:else}
                                    <svg class="w-3.5 h-3.5 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>
                                    {/if}
                                </span>
                                <div class="w-2 {item?.value === 5 ? 'bg-white' : item?.value < 5 ? 'bg-[#FF2F1F]' : 'bg-[#37C97D]' } rounded-full" style="height: 120px;">
                                    {#if data?.user?.tier === 'Pro'}
                                    <div class="bg-[#2F2F2F] w-2 rounded-t-full" style="height: {(100-item?.value*10)}%;"></div>
                                    {:else if ['1M','1Y']?.includes(item?.label)}
                                    <div class="bg-[#2F2F2F] w-2 rounded-t-full" style="height: {(100-item?.value*10)}%;"></div>
                                    {:else}
                                    <div class="bg-[#2F2F2F] w-2 rounded-t-full" style="height: {(100)}%;"></div>
                                    {/if}
                                </div>
                                <span class="text-white font-medium text-sm mt-4">
                                    {item?.label}
                                </span>
                            </div>
                            {/each}
                       
                    </div>
                    <!-- Adjusted line -->
                    <div class="sm:-ml-5 border-b absolute border-dashed border-gray-400 w-11/12 sm:w-5/6 left-1/2 transform -translate-x-1/2 {dashedLinePosition[oneMonthResult]}">
                        <div class="w-full flex justify-end mb-2">
                            <label class="text-sm font-semibold px-2 py-1.5 border rounded-full text-black {oneMonthResult === 5 ? 'bg-white border-white' : oneMonthResult < 5 ? 'bg-[#FF2F1F] border-[#FF2F1F]' : 'bg-[#37C97D] border-[#37C97D]'}">
                                Current: {oneMonthResult}
                            </label>
                        </div>
                    </div>
                
                
                </div>

                 <!-- Circular Progress -->
               

                  
                <!-- End Circular Progress -->

            </div>
            
            
            
              <!--End AI News Score-->
    
            
            {/if}


        </main>
    </section>