Βέλτιστη λύση για dashboard

[pagodas]

Χαιρετώ τους συμφορουμίτες και μπαίνω κατευθείαν στο θέμα.

Η ομάδα στην οποία δουλεύω αυτή τη στιγμή ασχολείται με οικονομικές και χρηματοοικονομικές αναλύσεις.

Οι αναλύσεις αποθηκεύονται σε αρχεία excel μέσα στα οποία υπάρχουν διαγράμματα τα οποία καθώς έρχονται νέα δεδομένα ανανεώνονται.

 

Για αυτά τα διαγράμματα υπάρχει ένα script σε c# το οποίο τα σώζει σαν png σε ένα συγκεκριμένο φάκελο.

Επίσης, το script σώζει σε ένα αρχείο csv τους τίτλους, τις λεζάντες, το full path του αρχείου που τα περιέχει κτλ.

 

Τα αρχεία excel είναι πάνω από 1000 κάθε ένα από το οποίο περιέχει διαφορετικές αναλύσεις. Σε κάθε αρχείο υπάρχουν κατά μέσο όρο 5 διαγράμματα.

 

Αυτό που θέλω να κάνω είναι να φτιάξω ένα dashboard μέσα στο οποίο ο χρήστης πληκτρολογώντας σε ένα textbox γράμματα ή λέξεις που περιέχονται π.χ. στην λεζάντα κάποιων διαγραμμάτων από κάτω να εμφανίζονται εκείνα τα αρχεία png τα οποία περιέχουν αυτές τις λέξεις. π.χ. αν ο χρήστης πατήσει "ΑΕΠ" να εμφανίζονται από κάτω όλα τα διαγράμματα που περιέχουν το ΑΕΠ.

 

Δεν μπορώ να χρησιμοποιήσω php ή asp (λόγω εταιρικού περιβάλλοντος που δεν το επιτρέπει).

Μπορώ να χρησιμοποιήσω είτε c# για τη δημιουργία μιας desktop εφαρμογής είτε όπως διαπίστωσα πρόσφατα javascript (?) για τη δημιουργία single web page app το οποίο δεν θα χρειάζεται κάποιον server για να τρέχει αλλά θα τρέχει τοπικά. Δηλαδή εννοώ, η javascript να διαβάζει το csv αρχείο και μετά να "φτιάχνει" τη σελίδα με τα αποτελέσματα. Πρόβλημα ασφάλειας δεν υπάρχει καθώς αυτή η εφαρμογή θα εκτελείται τοπικά και δεν θα υπάρχει στο web.

 

To ερώτημά μου είναι:

Μπορεί αυτό να γίνει με javascript? Υπάρχει κάποιο συγκεκριμένο framework που πρέπει να χρησιμοποιήσω ή να αρχίσω με plain javascript?

 

Ελπίζω να έγινα κατανοητός, συγνώμη για το μέγεθος του post και ευχαριστώ εκ των προτέρων όποιον μπορεί να βοηθήσει.

[kostenko]

Είναι σίγουρα εφικτό με js. Εγώ θα σου πρότεινα meteor.js που είναι και εύκολο ειδικά στην αρχή.

[Επισκέπτης]

Γίνεται με σκέτη JavaScript κι είναι κι αρκετά απλό έτσι όπως το περιγράφεις. Ακόμα καλύτερα αν μπορούσες να επέμβεις στο πρόγραμμα που είναι γραμμένο σε C# ώστε να σώζει τις πληροφορίες σε ένα .txt αρχείο αντί για .csv. Εκτός από jQuery δεν θα σου πρότεινα κανένα άλλο library γιατί μιλάμε για εκατό γραμμές κώδικα.

[pagodas]

@elorant μπορώ να επέμβω στο c# script που σώζει τα αρχεία, γιατί txt και όχι csv? Και το csv στην ουσία text file είναι. Απλά προσπαθώ να καταλάβω τι βολεύει περισσότερο και μετά να κάνω τις όποιες αλλαγές.

100 γραμμές κώδικα εννοείς με JQuery ή χωρίς;

 

Σας ευχαριστώ και τους δύο για τις απαντήσεις.

[kostenko]

Αν μπορείς να επέμβεις στο c# script τότε ούτε CSV, ούτε txt , αλλά json. Έχει δίκιο ο elorant όσον αφορά ότι είναι απλό και δε θέλει τπτ εκτός από Jquery. Εγώ το είπα σε περίπτωση που θες μετά να κάνεις Κ αλλά πράγματα εκτός από αυτό.

[Επισκέπτης]

Το «εκατό γραμμές» είναι σχήμα λόγου. Μπορεί να είναι τριάντα, μπορεί να είναι διακόσιες (που το βλέπω χλωμό αλλά τέλος πάντων). Η ουσία είναι ότι αυτό που περιγράφεις είναι αρκετά απλό. Μια σελίδα HTML που παίρνει input από τον χρήστη, ψάχνει σε ένα csv αρχείο και εμφανίζει τα pngs.

 

Text πρότεινα γιατί μου φαίνεται πιο απλό το format. Αν μπορείς να διαβάσεις csv κανένα πρόβλημα. Δοκίμασε να το φτιάξεις με σκέτη JavaScript κι αν κολλήσεις κάπου τότε κοίτα και την jQuery. Γενικά όσο πιο απλό κώδικα γράψεις τόσο πιο εύκολα να συντηρηθεί αυτό το πράγμα στο μέλλον. Ο μόνος λόγος που προτείνω jQuery είναι ότι πρόκειται για framework που υπάρχει εδώ και δέκα χρόνια άρα οι πιθανότητες να υπάρχει και γι άλλα δέκα είναι αρκετές.

[PC_MAGAS]

Μπορείς να κάνεις την εξής Αρχιτεκτονική:

 

Με javascript μπορείς σε Node.js να στήσεις ένα standalone full web server που θα σου σερβίρει το dashoboard με όλα το γραφικό περίβάλλον αλλά ΚΑΙ όλη την λογική εμφάνησης γραφήματος (ανάγνωση CSV κλπ κλπ).

 

Μπορεί σε C# να τρχει σαν μοναδική υπηρεσία το script και να σου δημιουργεί τα CSV και μετά με node.js τα διαβάζεις και τα φέρνεις σαν JSON response σε ένα single page application με angular η javascript γενικότερα (δες javascript frameworks).

 

Απλά ο Node.js server θα πρέπει να κοιτά στον ίδιο φάκελο με τα CSV αρχεία. Βλέπε στο επισυναπτώμενο Διάγραμμα .

 

Ακόμα ψάξε τα εξής keywords στο google/duck duck go:

Για το Server side: Sails.js, Express.js

Για το Client Side Single page application: Angular, Knockout.js, pager.js, require.js

 

Από τα παραπάνω δες τι σου κάνει.

 

Ακόμη η παραπάνω αρχιτεκτονική σου δίνει και ένα επίπεδο abstraction - scalability - βελτίωσης και είναι ποιο ευπροσαρμόσιμο στις αλλαγές. Πχ. Εαν αλλάξει ο τρόπος αποθηκεύσης σε DB να μην χριαστεί να αλλάζεις όλο στου ξανά και από την αρχή αλλά ένα σημείο μόνο: στα AJAX CALLS προκείμένου να το φέρεις στην μόρφή του το τραβά το panel.

Επεξ/σία 2 Μαΐου 2016 από PC_MAGAS

[M2000]

Τα csv αν διαβάζονται από client, τότε μπορεί να βγουν προβλήματα, που σχετίζονται με τους χαρακτήρες , και .

Αν έχουνε csv με tab ή με ; τότε θα είναι οκ, αρκεί να τα διαβάζει η ρουτίνα ανάγνωσης.

[Επισκέπτης]

@PC_MAGAS

Η απάντηση σου είναι χαρακτηριστική της σημερινής κατάστασης στο front end web development. Πως ένα απλό task γίνεται εξαιρετικά πολύπλοκο προσθέτοντας τη μία τεχνολογία πάνω στην άλλη. Node.js, Angular και το λουρί της μάνας για ένα πρόγραμμα που πρέπει να διαβάσει ένα csv αρχείο και να εμφανίσει κάποιες φωτογραφίες.

 

Jesus!

[parsifal]

@PC_MAGAS

Η απάντηση σου είναι χαρακτηριστική της σημερινής κατάστασης στο front end web development. Πως ένα απλό task γίνεται εξαιρετικά πολύπλοκο προσθέτοντας τη μία τεχνολογία πάνω στην άλλη. Node.js, Angular και το λουρί της μάνας για ένα πρόγραμμα που πρέπει να διαβάσει ένα csv αρχείο και να εμφανίσει κάποιες φωτογραφίες.

 

Jesus!

 

Έχεις ένα δίκιο, αλλά ο OP ανέφερε πως ASP και PHP δεν μπορεί να χρησιμοποιήσει. Άρα χρειάζεται κάποια άλλη server-side τεχνολογία ή CGI αντίστοιχων δυνατοτήτων με αυτές, γιατί με client-side Javascript μόνο (σκέτη ή έστω και με jQuery) δε μπορείς να έχεις πρόσβαση στο τοπικό σύστημα αρχείων.

[pagodas]

Σας ευχαριστώ όλους για τις απαντήσεις και το χρόνο που διαθέσατε.

Αποφάσισα να το φτιάξω με plain javascript from scratch για να μάθω κιόλας καθώς ο χρόνος δεν πιέζει. Εϊναι ένα project περισσότερο για να κάνουμε πιο αποδοτική την παρακολούθηση συγκεκριμένων αναλύσεων/τάσεων κτλ και τις οποίες θα έχουμε ανά πάσα στιγμή διαθέσιμες στην οθόνη μας και δεν υπάρχει συγκεριμένο χρόνος που πρέπει οπωσδήποτε να γίνει.

 

Στο μέλλλον, υπάρχει περίπτωση να προσθέσω και άλλα χαρακτηριστικά αλλά προς το παρόν μόνο αυτά που ανέφερ παραπάνω.

 

Δεν ξέρω πολύ javascript (ελάχιστη θα έλεγα), έχω ασχοληθεί με άλλες γλώσσες προγραμματισμού. Οπότε είναι μια καλή ευκαιρία να πειραματιστώ και γιατί όχι να αναπτύξω κάτι καλύτερο στο μέλλον.

 

Και πάλι ευχαριστώ!

Αν μπορείς να επέμβεις στο c# script τότε ούτε CSV, ούτε txt , αλλά json. Έχει δίκιο ο elorant όσον αφορά ότι είναι απλό και δε θέλει τπτ εκτός από Jquery. Εγώ το είπα σε περίπτωση που θες μετά να κάνεις Κ αλλά πράγματα εκτός από αυτό.

 

Ευχαριστώ, θα κοιτάξω να το κάνω με json. Το c# script το είχε χτίσει άλλος αλλιώς θα το είχα κάνει από την αρχή με json.

[defacer]

Το ζητούμενο μπορεί να γίνει μόνο με JS, απλά θέλει λίιιιιγη δουλειά παραπάνω για να "ταϊσεις" το αρχείο εισόδου, π.χ. με ένα file upload control (δε θα γίνει βέβαια κανένα upload πουθενά, ο σκοπός είναι να γίνουν διαθέσιμα τα περιεχόμενα του αρχείου σε JS).

 

Έφτιαξα ένα minimal demo στο Codepen για του λόγου το αληθές. Όντως δεν είναι τίποτα, για το βασικό functionality μιλάμε για 50 γραμμές και αν.

 

Για input μπορείτε να δώσετε αυτό που χρησιμοποιούσα για δοκιμές:

[
  {
    "tags": ["wikipedia", "wiki", "all"],
    "url": "https://en.wikipedia.org/static/images/project-logos/enwiki.png"
  },
  {
    "tags": ["insomnia", "all"],
    "url": "http://www.insomnia.gr/public/style_images/master/ingrskin/insomniacsmall2.png"
  }
]

Προφανώς θα μπορούσε να μην είναι JSON αν δεν ήμουν τεμπέλης.

[PC_MAGAS]

@PC_MAGAS

Η απάντηση σου είναι χαρακτηριστική της σημερινής κατάστασης στο front end web development. Πως ένα απλό task γίνεται εξαιρετικά πολύπλοκο προσθέτοντας τη μία τεχνολογία πάνω στην άλλη. Node.js, Angular και το λουρί της μάνας για ένα πρόγραμμα που πρέπει να διαβάσει ένα csv αρχείο και να εμφανίσει κάποιες φωτογραφίες.

 

Jesus!

Σαφώς απ΄α έδωσα ένα draft αυτό δεν σημαίνει ότι μπορεί να είναι ο μοναδικός τρόπος. Απλά πίστεύω ότι αυτό θα τον βολέψει μακροχρόνια και θα είναι once & for all εύκολο ως προς την χρήση με δυνατότητα επεκτασιμότητας όταν ο πελάτης σου δίνει 1 και σου σκάει άλλα 1000 λύση.

 

Αυτό όμως δεν τον αναγκάζει να χρησιμοποιήσει όλες τις παραπάνω τεχνολογίες πχ. μπορεί το frontpanel να είναι 1 σελίδα χωρίς angular κλπ κλπ επειδή δεν χρειάζεται. Εγώ υπόλόγισα έαν στο μέλλον πουν "ΩΠΑ δεν θέλουμε csv αλλά mysql."

 

Φίλτατε ούτως ή άλλως θα γράψεις που θα γράψεις Javascript μπορείς να δείς και την γλύκα της node ούτως η άλλως javascript είναι πάλι. Και σαφώς από τα λεγόμενα μου κρατάς ότι σε βολέυει. Απλά η λύση υποθέτει ότι όλα τα CSV είναι σε ένα αρχείο / φάκελο.

[kur3_V2.0]

Από ότι έχω καταλάβει τα αρχεία βρίσκονται στο server και εφόσον μιλάμε για 1000+ αρχεία τότε το να κάνεις αναζητήσεις θα γίνει πολύ γρήγορα αργό μέχρι αηδίας. Αν η χρήση βάσης δεν αποτελεί επιλογή θα χρησιμοποιούσα στη θέση σου memcached ή  redis για να μη χρειάζεται να ψάχνεις σε αρχεία άνοιξε/κλείσε αλλά σε με απλά όσο ένας πίνακασ δομή δεδομένων γρήγορη όσο η μνήμη RAM σου.

Άν πάλι δε θες να βάλεις κάποιο τέτοιο service μπορείς να κάνεις το Πηγή: εξήςαπλό και να αποθηκεύεις μια δομή ή ένα object  σε ένα αρχείο(κάτι σαν ένα μεγάλο master-csv)

 

Θα έκανα 2 πράγματα με τη C#

1. Ένα service για να ψάχνει στην μνήμη να βρει τι ταιριάζει στα keywords. Προτίμησε να επιστρέφεις σε JSON.

2. Ένα service που θα ανανεώνει τη "μνήμη" σου κάθε φορά που έχεις αλλαγές

 

Στο FE θες κάτι απλό:

1. ένα απλό input που περνάει με ajax(σε GET/POST) το search term.

2. Aπλά φορτώνεις τις εικόνες.

3. Για να μην ανακαλύπτεις τον τροχό Πηγή: πάρεκάνα έτοιμο example από bootstrap κτλ

[pagodas]

Από ότι έχω καταλάβει τα αρχεία βρίσκονται στο server και εφόσον μιλάμε για 1000+ αρχεία τότε το να κάνεις αναζητήσεις θα γίνει πολύ γρήγορα αργό μέχρι αηδίας. Αν η χρήση βάσης δεν αποτελεί επιλογή θα χρησιμοποιούσα στη θέση σου memcached ή  redis για να μη χρειάζεται να ψάχνεις σε αρχεία άνοιξε/κλείσε αλλά σε με απλά όσο ένας πίνακασ δομή δεδομένων γρήγορη όσο η μνήμη RAM σου.

Άν πάλι δε θες να βάλεις κάποιο τέτοιο service μπορείς να κάνεις το Πηγή: εξήςαπλό και να αποθηκεύεις μια δομή ή ένα object  σε ένα αρχείο(κάτι σαν ένα μεγάλο master-csv)

 

Θα έκανα 2 πράγματα με τη C#

1. Ένα service για να ψάχνει στην μνήμη να βρει τι ταιριάζει στα keywords. Προτίμησε να επιστρέφεις σε JSON.

2. Ένα service που θα ανανεώνει τη "μνήμη" σου κάθε φορά που έχεις αλλαγές

 

Στο FE θες κάτι απλό:

1. ένα απλό input που περνάει με ajax(σε GET/POST) το search term.

2. Aπλά φορτώνεις τις εικόνες.

3. Για να μην ανακαλύπτεις τον τροχό Πηγή: πάρεκάνα έτοιμο example από bootstrap κτλ

Τα δύο που είπες ότι θα έκανες με τη c# έχουν γίνει. (το 2 κάθε βδομάδα, δεν το χρειάζομαι live). Δεν έγραψα πουθενά ότι θα κάνω live αναζήτηση σε 1000+ αρχεία excel...